webpack 5 默认不压缩 css，需显式配置 css-minimizer-webpack-plugin 并与 minicssextractplugin 协同工作：用 minicssextractplugin.loader 替换 style-loader、置于 rules.use 第一位、插件放入 optimization.minimizer、启用 minimize: true，底层基于 cssnano，默认支持基础压缩，sourcemap 需显式开启。
Webpack 5 默认不压缩 CSS，哪怕设了 mode: "production"，提取出的 CSS 文件仍是明文。要真正压缩，必须显式引入并正确配置 css-minimizer-webpack-plugin，它不是“开箱即用”，而是需要和 MiniCssExtractPlugin 协同工作、放对位置、配好参数。
必须搭配 MiniCssExtractPlugin 提取 CSS
插件只压缩已提取的独立 CSS 文件，不处理内联样式或 JS 中的 style 字符串。
- 用
MiniCssExtractPlugin.loader替换style-loader，确保 CSS 被输出为 .css 文件 -
MiniCssExtractPlugin.loader必须放在rules.use数组第一位，顺序错会导致提取失败 - 如果项目仍用
style-loader直接注入 DOM，那根本没生成物理 CSS 文件，压缩插件无目标可压
插件必须放在 optimization.minimizer 里
这是最容易出错的位置——不能塞进 plugins 数组，否则完全不生效。
- Webpack 的压缩逻辑统一由
optimization.minimizer控制，CSS 和 JS 压缩都走这里 - 需手动启用
minimize: true（虽然 production 模式默认开启，但若你显式设为 false 就会被跳过） - 示例写法：
optimization: { minimizer: [new CssMinimizerPlugin()] }
基础压缩效果靠 cssnano，默认已启用
插件底层基于 cssnano，开箱即有空格清理、注释删除、颜色简写（如 #ff0000 → #f00）等基础优化。
- 无需额外安装 cssnano，但若需定制行为（如保留注释），就得在
minimizerOptions.preset中干预 - 例如保留所有注释：
minimizerOptions: { preset: ['default', { discardComments: {} }] } - 压缩不明显？先确认是否真生成了独立 CSS 文件，再检查是否有其他 loader（如 postcss-loader）提前做了处理或冲突
SourceMap 支持需显式开启
默认不生成 sourcemap，仅靠 Webpack 的 devtool: 'source-map' 不够。
- 必须在插件配置中加
sourcemap: true - 同时确保
postcss-loader的sourceMap选项也为true，否则链路断在第一步 - 若用 esbuild 引擎（v4+ 默认），它不支持独立 sourcemap 文件，建议切回 cssnano：安装
cssnano并传入minimizerOptions
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
