MiniCssExtractPlugin 不能用 style-loader 替代，因前者在构建阶段将 CSS 单独提取为物理 .css 文件，后者仅运行时注入 <style> 标签；开发用 style-loader（支持 HMR），生产才用 MiniCssExtractPlugin.loader。
MiniCssExtractPlugin 为什么不能用 style-loader 替代
因为 style-loader 是把 CSS 插入到 <style> 标签里运行时生效，而你明确要「单独提取」——也就是输出成独立的 .css 文件。Webpack 默认不生成物理 CSS 文件，必须靠 MiniCssExtractPlugin 在构建阶段把样式内容从 JS chunk 里抠出来、写入文件。
常见错误现象：Cannot find module 'mini-css-extract-plugin'（没装），或热更新失效（开发时误用了 MiniCssExtractPlugin.loader 而不是 style-loader）。
- 开发环境推荐用
style-loader，它支持 HMR；生产环境才切到MiniCssExtractPlugin.loader - 如果在
rules里对同一类 CSS 同时写了两个use链（比如又写style-loader又写MiniCssExtractPlugin.loader），Webpack 会按顺序执行，最终可能白配 -
MiniCssExtractPlugin.loader不接受options，不像style-loader支持{ injectType: 'singleton' }这类配置
如何配置 MiniCssExtractPlugin 让 CSS 真正分离
核心是两处：插件注册 + loader 替换。缺一不可，且必须匹配 Webpack 版本（v5+ 推荐用 v2.x 的插件，v4 用 v1.x）。
使用场景：你要打包出 main.css 和 vendor.css，而不是所有样式都打进 main.js 里。
立即学习“前端免费学习笔记（深入）”；
- 在
plugins数组里加new MiniCssExtractPlugin({ filename: '[name].[contenthash:8].css' })，filename必须设，否则默认还是叫main.css，无法利用缓存 - 在
module.rules里，把原来use: ['style-loader', 'css-loader']改成use: [MiniCssExtractPlugin.loader, 'css-loader']（注意顺序！loader 执行是从右往左） - 如果用了
postcss-loader或sass-loader，它们仍放在css-loader右侧，例如：[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
提取后 CSS 中的图片/字体路径错乱怎么办
这是最常被忽略的坑：CSS 里写的 url(./img/logo.png)，提取后生成的 main.css 位置变了，但 Webpack 默认不会重写这些 URL，导致 404。
性能影响：路径错了，浏览器反复请求失败资源，首屏渲染卡顿。
- 确保
css-loader开启url: true（v6+ 默认开启，v5 需显式写{ url: true }） -
file-loader或asset-module类型配置必须覆盖图片/字体后缀，且publicPath要和最终 CSS 文件相对位置一致 - 如果 CSS 和 JS 输出目录不同（比如 CSS 放
css/，JS 放js/），得在MiniCssExtractPlugin构造函数里配publicPath: '../'来修正相对引用
为何 extract 后的 CSS 没有按 entry 分开
因为 MiniCssExtractPlugin 默认只按模块依赖图提取，不感知 entry。如果你有 entry: { a: './a.js', b: './b.js' }，但两个 JS 都 import 了同一份 common.scss，那它大概率会被抽进一个共用 CSS 文件，而不是分别进 a.css 和 b.css。
兼容性影响：老项目做渐进式迁移时，容易误以为「每个 entry 对应一个 CSS」，结果发现样式互相污染或加载冗余。
- 想强制分离，得配合
optimization.splitChunks，用cacheGroups把 CSS 单独拎出来，再结合name控制 chunk 名 - 更稳妥的做法是业务层约束：每个 entry 只 import 自己的样式，避免跨 entry 共享 CSS 模块
- 注意
runtimeChunk: 'single'会影响提取逻辑，有时会让 CSS 被意外塞进 runtime chunk，得关掉或调低优先级
真正麻烦的是 CSS 里带动态 @import 或 url() 字符串拼接——这类路径 Webpack 解析不到，插件也无能为力，只能靠人工收敛或改用 CSS-in-JS。
