mini-css-extract-plugin必须动态切换loader（开发用style-loader、生产用minicssextractplugin.loader）、显式配置publicpath（控制css内url解析基准）、手动启用css-minimizer-webpack-plugin压缩，三者缺一不可；否则开发白屏、生产css 404或体积暴增。
Webpack 5 中 mini-css-extract-plugin 不是“装了就能用”的插件——它必须配合 loader 动态切换、publicPath 显式控制、CSS 压缩手动开启，三者缺一不可；否则开发时白屏、生产时 CSS 404 或体积暴增。
MiniCssExtractPlugin.loader 和 style-loader 为什么不能共存
两者功能互斥：MiniCssExtractPlugin.loader 只在生产构建时写入 .css 文件并生成 <link>，不提供运行时注入能力；style-loader 则专为开发设计，把 CSS 注入 <style></style> 标签以支持 HMR。如果在 use 数组里同时写死它们，Webpack 会尝试顺序执行，但 MiniCssExtractPlugin.loader 在开发环境下直接报错 Cannot use [MiniCssExtractPlugin] plugin as it provides no runtime，页面空白。
必须用环境变量动态切换：
-
process.env.NODE_ENV === 'production'是唯一可靠判断依据，Webpack 的mode字段对 loader 行为无影响 -
css-loader必须放在style-loader或MiniCssExtractPlugin.loader左侧（即数组靠后位置），否则style-loader收到原始字符串会报Cannot read property 'toString' of undefined - 开发环境推荐用
style-loader@3.3.0+，旧版 v2.x 不兼容 Webpack 5 的 ModuleGraph API，会丢失insert函数导致热更新失效
publicPath 配错导致 CSS 内部 url(./logo.png) 全部 404
MiniCssExtractPlugin 的 publicPath 控制的是 CSS 文件内 url(./img.png) 这类相对路径的解析基准，和 Webpack 的 output.publicPath 是两回事。它优先级更高，且必须显式传入插件实例中，否则默认为空字符串，所有相对路径都按根目录解析。
常见错误场景：
- 部署到子目录（如
/admin/）却没设publicPath: '/admin/'→ 请求变成/img/logo.png而非/admin/img/logo.png - 使用 CDN（如
https://cdn.example.com/v3/）但只配了output.publicPath，没在MiniCssExtractPlugin实例里同步 → 字体、图片全 404 - 误以为
output.publicPath能覆盖一切，结果 CSS 里的路径解析完全失控
正确写法示例：
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
publicPath: '/admin/' // 显式声明，不依赖 output.publicPath
})
chunkFilename 不带 contenthash 导致重复输出相同 CSS
现象是多个异步 chunk（比如路由组件懒加载）各自输出一份内容完全相同的 main.css。根源在于 Webpack 无法识别“内容相同”，只要 chunk 名不同或没哈希，就每个都写一次。
解决方式非常具体：
- ✅ 正确配置：
chunkFilename: '[name].[contenthash:8].css' - ❌ 错误写法：
chunkFilename: '[name].css'，或在splitChunks.cacheGroups里给 CSS 单独指定name—— 这会覆盖contenthash行为，照样重复输出 - 别忘了启用
css-minimizer-webpack-plugin，否则提取出的 CSS 是未压缩明文，体积可能比源文件还大
Conflicting order 警告不是警告，是样式顺序失控信号
这个提示本质是：多个 chunk 以不同顺序 import 同一份 CSS（例如 A → B → common.css，C → common.css），导致最终生成的 CSS 规则顺序不可控。强行设 ignoreOrder: true 等于放弃样式层叠保障，上线后可能突然覆盖失效。
真实解法只有两个方向：
- 把公共 CSS 统一提到入口 JS（如
index.js）顶部引入，避免分散 import - 若必须跨 chunk 复用，启用
splitChunks.chunks: 'all'并配cacheGroups将它们归并到同一个 CSS chunk -
ignoreOrder: true只应在确认无样式冲突、且临时上线时使用，长期开启就是埋雷
SCSS/LESS 等预处理器同理，所有样式类型（.scss、.less、.styl）的 use 数组首项都必须同样做环境判断替换，漏一个就会白屏或报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
