生产环境必须用MiniCssExtractPlugin.loader替换style-loader，否则CSS无法生成独立文件且不以引入；它必须置于use数组首位，预处理器同理；需正确配置publicPath避免资源404；多chunk共用CSS需解决Conflicting order警告；CSS压缩须通过CssMinimizerPlugin在optimization.minimizer中配置。
生产环境必须用 MiniCssExtractPlugin.loader 替换 style-loader，否则 CSS 不会生成独立文件，也不会以 <link> 方式引入——这不是“可选优化”，而是生效前提。
loader 链里 MiniCssExtractPlugin.loader 必须放在第一位
Webpack 的 loader 执行顺序是从右往左，MiniCssExtractPlugin.loader 是“接收 css 字符串并写入文件”的入口，必须处于 use 数组最右（即第一个执行的 loader）：
- ✅ 正确：
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] - ❌ 错误：
use: ['css-loader', MiniCssExtractPlugin.loader]→ css-loader 先执行，返回 JS 模块，插件根本收不到原始 CSS 内容 - 预处理器（
.scss、.less）同样要遵守：首项必须是MiniCssExtractPlugin.loader，后面接css-loader、sass-loader等
publicPath 不配对，CSS 里的图片和字体全 404
MiniCssExtractPlugin 的 publicPath 控制的是 CSS 文件内部 url(./img/logo.png) 这类路径的解析基准，和 HTML 中 <link href="...>%20%E7%9A%84%E8%B7%AF%E5%BE%84%E6%97%A0%E5%85%B3%EF%BC%9A
- %0A
- %E9%83%A8%E7%BD%B2%E5%88%B0%E5%AD%90%E7%9B%AE%E5%BD%95%EF%BC%88%E5%A6%82%20
/admin/%EF%BC%89%E6%97%B6%EF%BC%8C%E9%9C%80%E6%98%BE%E5%BC%8F%E4%BC%A0%E5%85%A5%20publicPath:%20'/admin/'%EF%BC%8C%E5%90%A6%E5%88%99%E5%9B%BE%E7%89%87%E8%AF%B7%E6%B1%82%E5%8F%98%E6%88%90%20/img/logo.png%20%E8%80%8C%E4%B8%8D%E6%98%AF%20/admin/img/logo.png%0A - %E7%94%A8%E4%BA%86%20CDN%EF%BC%88%E5%A6%82%20
https://cdn.example.com/v3/%EF%BC%89%EF%BC%8C%E5%88%99%20output.publicPath%20%E5%92%8C%20MiniCssExtractPlugin%20%E5%AE%9E%E4%BE%8B%E9%87%8C%E7%9A%84%20publicPath%20%E5%BF%85%E9%A1%BB%E4%B8%80%E8%87%B4%EF%BC%8C%E5%90%8E%E8%80%85%E4%BC%98%E5%85%88%E7%BA%A7%E6%9B%B4%E9%AB%98 %0A - %E4%B8%8D%E8%AE%BE%20
publicPath%20%E6%97%B6%EF%BC%8C%E9%BB%98%E8%AE%A4%E7%94%A8%20output.publicPath%EF%BC%8C%E4%BD%86%E7%BA%BF%E4%B8%8A%E7%8E%AF%E5%A2%83%E5%BE%80%E5%BE%80%E9%9C%80%E8%A6%81%E8%A6%86%E7%9B%96%E5%AE%83 %0A
%E5%A4%9A%E4%B8%AA%20chunk%20import%20%E5%90%8C%E4%B8%80%20CSS%20%E6%96%87%E4%BB%B6%EF%BC%8C%E4%BC%9A%E8%A7%A6%E5%8F%91%20Conflicting%20order%20%E8%AD%A6%E5%91%8A
%0A%E8%BF%99%E4%B8%AA%E8%AD%A6%E5%91%8A%E4%B8%8D%E6%98%AF%E6%8F%90%E7%A4%BA%EF%BC%8C%E6%98%AF%E7%9C%9F%E5%AE%9E%E9%A3%8E%E9%99%A9%EF%BC%9A%E4%B8%8D%E5%90%8C%20chunk%20%E4%BB%A5%E4%B8%8D%E5%90%8C%E9%A1%BA%E5%BA%8F%E5%BC%95%E5%85%A5%E5%90%8C%E4%B8%80%E4%BB%BD%20CSS%EF%BC%8C%E6%9C%80%E7%BB%88%E7%94%9F%E6%88%90%E7%9A%84%20CSS%20%E8%A7%84%E5%88%99%E9%A1%BA%E5%BA%8F%E4%B8%8D%E5%8F%AF%E6%8E%A7%EF%BC%8C%E5%8F%AF%E8%83%BD%E5%AF%BC%E8%87%B4%E6%A0%B7%E5%BC%8F%E8%A2%AB%E6%84%8F%E5%A4%96%E8%A6%86%E7%9B%96%EF%BC%9A
%E7%AB%8B%E5%8D%B3%E5%AD%A6%E4%B9%A0%E2%80%9C
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 检查是否在多个组件、工具函数或非入口文件里重复
import './common.css' - 公共样式应统一在主入口 JS（如
index.js）顶部引入，避免分散 - 若必须跨 chunk 复用，启用
splitChunks.chunks: 'all'并通过cacheGroups把它们归并到同一个 CSS chunk -
ignoreOrder: true只应在确认无样式冲突、且临时上线时使用；长期开启等于放弃顺序保障
CSS 压缩必须手动加 CssMinimizerPlugin
Webpack 5 默认不压缩 CSS，哪怕你用了 MiniCssExtractPlugin，输出的 .css 文件仍是明文：
- 装包：
npm install --save-dev css-minimizer-webpack-plugin - 插件必须进
optimization.minimizer，不能塞进plugins数组 - 推荐开启多线程：
new CssMinimizerPlugin({ parallel: true })，尤其项目含大量 SCSS 时提速明显 - 如果用了 PostCSS，确保
postcss.config.js导出的是对象（不是函数），且插件（如autoprefixer）已正确安装，否则压缩阶段可能静默失败
最容易被忽略的点是：loader 切换逻辑没做环境判断，导致开发时白屏；还有就是 publicPath 没随部署路径同步调整，结果 CSS 里所有 url() 全挂。这两处一错，整个样式链就断了。
