webpack 5 默认不压缩 css，需手动配置 css-minimizer-webpack-plugin；minicssextractplugin 提取的 css 仍为明文，必须显式添加插件并设 parallel: true 加速；注意 postcss 配置兼容性、@import 加载顺序、source-map 安全策略及工具链解析差异。
Webpack 5 默认不压缩 CSS，得手动配 css-minimizer-webpack-plugin
Webpack 5 把 CSS 压缩从内置逻辑里移出去了，哪怕你用了 MiniCssExtractPlugin 提取样式，最终生成的 .css 文件还是明文——这点很多人上线后才发现文件大得离谱。
必须显式装插件并配置：
npm install --save-dev css-minimizer-webpack-plugin
然后在 webpack.config.js 的 optimization.minimizer 里加进去：
-
new CssMinimizerPlugin({ parallel: true })—— 开启多线程能明显提速，尤其项目里有大量 SCSS 文件时 - 别漏掉
minimize: true在mode: 'production'下虽默认开启，但若你手动写了optimization.minimize: false，插件就直接被跳过 - 如果用了 PostCSS，确保
css-minimizer-webpack-plugin的minify选项和你postcss.config.js里的配置兼容，否则可能把@layer或嵌套语法删掉导致样式失效
合并多个 CSS 文件？小心 @import 和提取顺序
用 MiniCssExtractPlugin 把所有 import './a.css' 和 import './b.css' 合成一个文件，看起来很干净，但实际加载顺序容易出错。
立即学习“前端免费学习笔记（深入）”；
常见问题：某个组件样式被全局重置样式覆盖，或者主题色没生效——根本不是 CSS 优先级问题，而是打包后 a.css 写在了 b.css 前面，而 b.css 本该先载入。
- 入口文件中
import的顺序 = 最终合并后 CSS 规则的顺序，别指望 Webpack 自动按依赖图排序 -
@import在 CSS 文件内部会被 Webpack 当作独立模块处理，可能被抽成另一个 chunk，导致异步加载、闪屏或 FOUC - 想强制合并？把所有样式
import收口到一个index.css里，再只 import 这一个文件；别在 JS 里零散 import 多个样式文件
PostCSS 配置写错，压缩后 CSS 直接报错或丢规则
css-minimizer-webpack-plugin 底层默认调 PostCSS，如果你的 postcss.config.js 里写了 plugins: [require('autoprefixer')]，但没装 autoprefixer 或版本不匹配，构建不会报错，但压缩阶段会静默失败，输出空 CSS 或截断内容。
- 检查
postcss.config.js是否导出对象，而不是函数（Webpack 5.70+ 对函数式配置支持不稳定） - 避免在
postcss.config.js里用env === 'production'条件启用cssnano——css-minimizer-webpack-plugin自己已集成cssnano，重复启用会导致双重压缩、calc()被错误折叠、自定义属性丢失 - 如果用了
tailwindcss/nesting，确保它在postcss.config.js中排在tailwindcss之前，否则嵌套语法解析失败，压缩器会直接跳过整条规则
Source map 在生产环境要不要开？看调试成本和部署风险
CSS 的 source-map 不像 JS 那样常被需要，但它真能帮你快速定位是哪个 SCSS 文件哪一行写的 margin: 0 覆盖了组件样式。不过上线后暴露源码路径，有风险。
- 设
devtool: 'source-map'会让每个 CSS chunk 生成对应.css.map文件，需确保 Nginx 或 CDN 允许访问*.map后缀，否则浏览器控制台报 404 却不提示原因 - 如果用
MiniCssExtractPlugin，记得在插件选项里显式打开：new MiniCssExtractPlugin({ sourceMap: true })，否则即使 Webpack 级别开了，CSS 也不会带映射 - 更安全的做法：构建时生成
.map，但部署脚本自动删掉它们，或通过Content-Security-Policy禁止浏览器加载，既保调试能力又不外泄路径
真正麻烦的从来不是配对插件，而是不同工具链对同一份 CSS 的解析差异——比如 PostCSS 认为合法的 color-mix()，压缩器可能当成无效声明删掉，这种细节得靠真实浏览器验证，不能只信构建日志。
