MiniCssExtractPlugin 必须在生产环境替换 style-loader 才能提取独立 CSS 文件，开发时保留 style-loader 以支持 HMR；需按环境区分 loader，且 MiniCssExtractPlugin 的 filename 和 chunkFilename 均须配置 contenthash。
MiniCssExtractPlugin 必须替换 style-loader 才能生效
开发时用 style-loader 是为了支持 HMR（热更新），但生产环境必须换成 MiniCssExtractPlugin.loader，否则 CSS 会继续内联到 JS 中，根本无法提取为独立文件。如果你在 module.rules 里同时保留两者，或只改了部分 rule，Webpack 会静默忽略提取逻辑，打包后依然看不到 .css 文件。
正确做法是按环境区分 loader：
- 开发环境：用
style-loader - 生产环境：用
MiniCssExtractPlugin.loader - 不能混用；也不能只在某一条
use链里替换单个 loader
示例配置片段：
module: {
rules: [{
test: /\.css$/,
use: [
isProduction
? MiniCssExtractPlugin.loader
: 'style-loader',
'css-loader',
'postcss-loader'
]
}]
}
contenthash 要同时作用于 filename 和 chunkFilename
只给 output.filename 加 [contenthash] 不够——CSS 文件由 MiniCssExtractPlugin 输出，它的命名不受 Webpack output 控制，必须单独配 filename 和 chunkFilename。
立即学习“前端免费学习笔记（深入）”；
漏掉 chunkFilename 会导致异步加载的 CSS（比如 import('./async.css')）仍用旧名，缓存失效。
-
MiniCssExtractPlugin.filename：控制同步引入的 CSS 文件名，如main.[contenthash].css -
MiniCssExtractPlugin.chunkFilename：控制动态导入生成的 CSS chunk 名，如async.[contenthash].css - 两者都必须含
[contenthash]，且建议保持命名风格一致
错误示范：filename: 'styles.css' → 每次构建都覆盖同名文件，浏览器永远读缓存
contenthash 失效的三个常见原因
即使写了 [contenthash]，也可能发现文件名不变、或变的不合预期。核心问题往往不在配置本身，而在依赖链或插件顺序。
-
postcss-loader或css-loader的 options 变动（如sourceMap: true开关）会影响 CSS 内容哈希值，导致无意义变更 - 未启用
cache: true（Webpack 5 默认开启，但若手动关闭或误配cache.type = 'filesystem'却没设cache.buildDependencies，可能使 contenthash 计算不稳定） -
mini-css-extract-plugin版本太低（
验证方式：修改一行 CSS，看输出的 CSS 文件名是否变化；再改回原样，文件名应恢复——否则说明哈希没真正绑定内容。
HTML 中引用的 CSS 文件名需由 html-webpack-plugin 自动注入
你手写 <link href="main.css"> 到模板里，就算 Webpack 输出了 main.a1b2c3d4.css，页面也还是请求旧名。必须让 html-webpack-plugin 读取 compilation asset 清单，自动替换 href 值。
- 确保
html-webpack-plugin版本 ≥ 5.5.0（适配 Webpack 5） - 不要在
templateHTML 中硬编码 CSS 文件名 - 插件默认会注入所有匹配的
.css文件，无需额外配置chunks（除非你要过滤）
如果用了多页配置（多个 HtmlWebpackPlugin 实例），每个实例都会各自注入对应入口产出的 CSS，这点不用额外处理。
最易被忽略的一点：CSS 提取和 contenthash 是两层事——前者靠 MiniCssExtractPlugin 实现，后者靠它和 Webpack 共同计算。中间只要 loader 输出不稳定、插件版本错配、或 HTML 引用没走自动注入，整个缓存链条就断了。检查时优先确认这三处：loader 是否环境隔离、plugin 的 filename/chunkFilename 是否都带 hash、HTML 是否由插件生成而非手写。
