开发模式下不能用MiniCssExtractPlugin，因为它仅在生产环境安全运行，开发时会导致构建失败或样式不生效；必须用style-loader实现内联注入与HMR热更新。
开发模式下 CSS 为什么不能用 MiniCssExtractPlugin？
因为 MiniCssExtractPlugin 只在生产环境（mode: 'production'）下安全运行，开发时用它会导致报错 Module build failed: MiniCssExtractPlugin is not a loader 或样式完全不生效。
开发阶段必须用 style-loader：它把 CSS 内联注入 <head>，支持 HMR 热更新，改完保存立刻看到效果。
-
style-loader+css-loader是开发标配，顺序不能颠倒（use: ['style-loader', 'css-loader']） - 如果误在 dev 模式启用
MiniCssExtractPlugin.loader，Webpack 会直接拒绝构建 - 想统一写法？可以用
process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader'动态判断
生产环境提取 CSS 到独立文件的关键配置
提取 CSS 的核心是替换 style-loader，并引入 MiniCssExtractPlugin 插件。漏掉任意一环都会导致 CSS 还在 JS 里、或打包失败。
- 安装必要依赖：
npm install --save-dev mini-css-extract-plugin css-loader - loader 配置中，把
style-loader换成MiniCssExtractPlugin.loader，例如：use: [MiniCssExtractPlugin.loader, 'css-loader'] - plugins 数组里必须 new 实例：
new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:8].css' }) - 注意
filename中的[contenthash]—— 不要用[hash]，否则 CSS 文件内容没变但 JS 改了，CSS 的 hash 也会变，缓存失效
为什么 CSS 兼容性处理必须放在 css-loader 之后、MiniCssExtractPlugin 之前？
PostCSS 的执行顺序严格依赖 loader 链位置。如果 postcss-loader 放错，autoprefixer 就不会生效，老浏览器里 Flex 布局可能直接崩。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序（从右到左读）：
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] -
postcss-loader必须紧挨css-loader后面，它处理的是css-loader输出的 CSS 字符串，不是原始文件 - 确保项目根目录有
.browserslistrc或package.json中含browserslist字段，否则postcss-preset-env不知道该兼容哪些版本 - 别忘了装
postcss和postcss-preset-env：npm install --save-dev postcss postcss-preset-env
CSS 压缩为什么默认不生效？怎么配才真正起作用？
Webpack 5 内置了 css-minimizer-webpack-plugin，但它只在 mode: 'production' 下自动启用——前提是你的 CSS 已被成功提取为独立文件。如果还在 JS 里，压缩器根本收不到 CSS 内容。
- 确认你已用
MiniCssExtractPlugin提取了 CSS，否则css-minimizer-webpack-plugin无事可做 - 不需要手动安装插件（Webpack 5+ 自带），但需显式配置以启用 sourceMap 或自定义选项：
optimization: { minimizer: [new CssMinimizerPlugin({ parallel: true })] } - 如果用了
splitChunks分离第三方 CSS（比如 node_modules 里的 antd.css），记得在cacheGroups里给 CSS 单独设enforce: true，否则压缩可能跳过它们 - 检查输出文件大小：未压缩的
.css文件通常比压缩后大 20%–40%，这是最直接的验证方式
style-loader，生产换 MiniCssExtractPlugin.loader，中间穿插 postcss-loader 的位置不能错，压缩器只对提取后的文件起效。少一个环节，CSS 就卡在 JS 里出不来。 
