MiniCssExtractPlugin.loader不能与style-loader混用，因二者功能互斥：前者仅生产环境提取CSS为独立文件并生成<link>，后者专用于开发环境热更新并注入<style>标签；必须通过process.env.NODE_ENV动态切换loader，否则导致HMR失效、样式不生效或白屏。
MiniCssExtractPlugin 不是“开箱即用就快”，它默认配置下可能反而拖慢构建或导致运行时错误——关键在 loader 切换逻辑、环境隔离和 CSS 文件粒度控制。
为什么 MiniCssExtractPlugin.loader 不能和 style-loader 混用
Webpack 的 use 数组里，loader 是从右往左执行的。如果同时写了 style-loader 和 MiniCssExtractPlugin.loader，最终会因两者冲突导致样式不生效或报错 Module not found: Error: Can't resolve 'css-loader' 这类路径问题。
-
MiniCssExtractPlugin.loader只负责把 CSS 提取成独立文件，并注入<link>标签 -
style-loader是把 CSS 插入<style>标签到 DOM，仅适用于开发环境热更新 - 二者功能互斥，必须根据
process.env.NODE_ENV动态切换
开发 vs 生产环境 loader 必须分开配置
硬编码 MiniCssExtractPlugin.loader 到所有环境，会导致开发时 HMR 失效、样式无法热更新、甚至白屏。
- 开发环境应使用
style-loader（支持 HMR） - 生产环境才启用
MiniCssExtractPlugin.loader - 推荐写法：
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader'] - 注意：不要用
isProduction这类未定义变量，直接读process.env.NODE_ENV
提取后 CSS 文件没压缩？得手动加压缩插件
Webpack 5 内置的 JS 压缩（TerserPlugin）对 CSS 完全无效，MiniCssExtractPlugin 输出的 .css 文件默认是未压缩的原始内容。
立即学习“前端免费学习笔记（深入）”；
- 必须额外安装
css-minimizer-webpack-plugin（Webpack 5 推荐替代optimize-css-assets-webpack-plugin） - 配置需加入
optimization.minimizer，而非 plugins 数组 - 示例：
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');<br>module.exports = {<br> optimization: {<br> minimizer: ['...', new CssMinimizerPlugin()],<br> },<br>}; - 否则上线后 CSS 文件体积可能比打包前还大
什么时候不该用 MiniCssExtractPlugin？
不是所有项目都适合提取 CSS。小项目或首屏 CSS 很少时，提取反而增加 HTTP 请求、破坏缓存局部性。
- 单页应用中，若提取出的 CSS 文件小于 ~150KB，嵌入 JS 可能更快（减少一次网络请求）
- 多页面应用（MPA）中，公共 CSS 提取合理；但每个页面独有样式若只用一次，提取后利用率低
- 使用
import('./style.css')动态导入时，MiniCssExtractPlugin会为每个 chunk 生成独立 CSS，容易产生大量碎文件 - 真正收益场景：大型 SPA、CSS 体积大、复用率高、需要长期缓存
最常被忽略的一点：extract 后的 CSS 文件名依赖 Webpack 的 chunk ID 生成策略，若没配 chunkFilename 或没禁用 contenthash，可能导致缓存失效或 HTML 中 <link> 路径错乱。务必检查输出目录实际生成的文件名是否与 HtmlWebpackPlugin 注入的一致。
