MiniCssExtractPlugin.loader必须替换style-loader且仅用于生产环境，开发环境用style-loader支持HMR；需通过process.env.NODE_ENV动态切换loader，否则HMR失效或样式不渲染。
mini-css-extract-plugin.loader没替换style-loader
开发环境常用 style-loader 把 CSS 注入 <style> 标签，但它和 mini-css-extract-plugin 互斥：后者只处理“被提取”的 CSS 模块，而 style-loader 完全绕过文件输出流程。
常见错误是 rules 中仍保留 style-loader，或在 production 和 development 共用同一套 use 配置。必须确保：
-
MiniCssExtractPlugin.loader出现在use数组最左侧（即最后执行），且仅用于mode: 'production' - 开发环境仍可用
style-loader，但需通过process.env.NODE_ENV或webpack-merge动态切换 - loader 执行顺序不能错：应为
[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']，而非反过来
Webpack mode不是production
mini-css-extract-plugin 在非 production 模式下默认不生效——它依赖 Webpack 的 optimization.splitChunks 和 runtimeChunk 行为，而这些仅在 mode: 'production' 下自动启用。
即使你手动写了 new MiniCssExtractPlugin()，若 mode 是 'development' 或未声明，插件会静默跳过提取逻辑，也不报错。
立即学习“前端免费学习笔记（深入）”；
验证方式：
- 检查
webpack.config.js顶层是否有mode: 'production' - 或运行时显式传参：
webpack --mode=production - 注意：某些脚手架（如 Create React App）会覆盖该字段，需查其内部配置逻辑
package.json中sideEffects: false误删CSS
这是最隐蔽也最常被忽略的坑。sideEffects: false 告诉 Webpack：“所有模块都没副作用，可安全 Tree Shake”，但 CSS 文件（尤其是 import './index.css' 这种无导出语句的写法）会被当成“无用代码”直接丢弃——连 mini-css-extract-plugin 都收不到输入。
修复只需放宽限制：
- 改为
sideEffects: ["*.css", "*.scss", "*.less"]，明确声明 CSS 类型有副作用 - 或更保守地写成
sideEffects: ["*.css", "*.scss", "*.less", "*.js"]（如果项目里有带副作用的 JS） - 注意：这个字段只在作为 npm 包发布时影响 consumer 构建，但如果你的项目本身也启用了
optimization.sideEffects，它就起作用
CSS文件生成了但没被HTML引用
mini-css-extract-plugin 能成功输出 .css 文件，不代表页面能加载它。常见断点在 HTML 注入环节：
-
html-webpack-plugin默认只注入 JS，不自动 link CSS——除非你用的是 v5+ 且开启了inject: true（默认值），它才会读取compilation.assets中的 CSS 并插入<link> - 检查构建后
dist/index.html是否真有<link href="main.xxxx.css">；没有的话，确认插件版本 ≥5.3.0，且未设置inject: 'body'（这会禁用 CSS 注入） - 如果用了自定义
template，需手动添加<%= htmlWebpackPlugin.files.css %>或等价语法
sideEffects 和 mode 两个地方反复试错却没意识到它们的存在。插件本身不报错，只是沉默地跳过整个流程。 
