mini-css-extract-plugin替代style-loader是生产环境必需，因style-loader将CSS注入JS导致无法缓存、并行加载和首屏渲染阻塞；该插件仅在production下提取独立.css文件，开发时仍需style-loader支持HMR。
Webpack 中 mini-css-extract-plugin 替代 style-loader 的必要性
开发时用 style-loader 把 CSS 注入 <style></style> 标签没问题，但生产构建必须抽离为独立 .css 文件——否则无法利用浏览器缓存、无法并行加载、CSS 会随 JS bundle 重复下载。Bootstrap 4 的样式量不小，不抽离会导致首屏渲染阻塞加重。
关键点：
-
mini-css-extract-plugin只在mode: 'production'下生效，开发环境仍可用style-loader热更新 - 不能和
style-loader共存于同一 rule；若配置了两者，Webpack 会静默忽略后者 - Bootstrap 的
@import链（如_variables.scss → _mixins.scss → _reboot.scss）依赖resolve-url-loader修正 Sass 中的相对路径，否则url()引用字体或图片会 404
postcss-loader 必须启用 autoprefixer 才能兼容老浏览器
Bootstrap 4 的 CSS 类（如 .d-flex、.flex-wrap）大量使用 Flexbox，而 IE10/11 对 display: flex 的前缀支持不一致。仅靠 Sass 编译无法自动补全，必须经 PostCSS 处理。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- IE11 中栅格错位、卡片高度塌陷，控制台无报错，但 computed styles 显示
display: -ms-flexbox缺失 - 配置了
postcss-loader却没装autoprefixer，或browserslist没覆盖ie >= 10 -
bootstrap-loader默认不接管 PostCSS 流程，需手动在 Webpack rule 中显式插入postcss-loader
最小可用配置示例：
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: { plugins: [require('autoprefixer')({ grid: true })] }
},
'sass-loader'
]
bootstrap-loader 的 .bootstraprc 配置易被忽略的陷阱
很多人以为只要 require('bootstrap-loader') 就完事，其实它默认只加载 JS 组件（alert、modal），CSS 样式是否引入、引入哪些，全由 .bootstraprc 控制。没这个文件或字段写错，你的 .btn 类就根本不会进打包结果。
关键参数差异：
-
styles: true≠ 加载全部样式；它只是开关，真正控制粒度的是子项，比如grid: true、tables: false -
scripts和styles是平行结构，不是父子关系；设scripts: { modal: true }不会自动带出styles: { modal: true } -
bootstrapVersion: 4必须显式声明，否则 loader 可能降级到 Bootstrap 3 的变量逻辑，导致$enable-rounded: false失效 - 如果用了自定义
$theme-colors，必须确保styles: theme: true开启，否则新颜色类（如.bg-primary-dark）不会生成
字体与图标资源路径在生产环境 404 的真实原因
Bootstrap 4 的 scss/_reboot.scss 和 scss/_type.scss 里有 url('~bootstrap/scss/bootstrap-icons.woff2') 这类引用，Webpack 默认不认识 ~ 别名，也不会处理 node_modules/bootstrap/scss/ 下的静态资源。
解决方案只有两个，且必须二选一：
- 在
webpack.config.js的resolve.alias中加：'bootstrap/scss': path.resolve(__dirname, 'node_modules/bootstrap/scss')，再配合url-loader处理.woff2后缀 - 更推荐：改用
bootstrap官方预编译的 CSS（dist/css/bootstrap.min.css），绕过 Sass 编译链，直接引入——适合不需要定制变量的项目
注意：bootstrap-loader 默认走 Sass 路径，哪怕你只想要 CSS，它也会尝试解析 node_modules/bootstrap/scss/，所以 alias 或切换入口是绕不开的。
复杂点在于，这些路径问题往往只在 npm run build 后暴露，开发服务器（webpack-dev-server）因内存文件系统机制可能掩盖 404，等上线才发现图标全变成方块。
