MiniCssExtractPlugin仅生成独立CSS文件，不注入HTML；必须配合HtmlWebpackPlugin（≥v5.0、inject:true）自动插入<link>，且loader需按环境切换为MiniCssExtractPlugin.loader（生产）或style-loader（开发），同时正确配置publicPath以确保资源路径解析正确。
MiniCssExtractPlugin 本身不自动把 CSS 塞进 HTML，它只负责在构建时把样式内容从 JS 中剥离出来，写成独立的 .css 文件。要让页面真正加载这个文件，必须满足三个条件：正确替换 loader、启用 HtmlWebpackPlugin 自动注入、且配置好 publicPath。
loader 必须按环境切换
开发阶段不能用 MiniCssExtractPlugin.loader，否则页面没样式；生产才启用它作为“提取触发器”。推荐写法：
- 用 process.env.NODE_ENV === 'production' 判断环境
- loader 链写成：[isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader']
- MiniCssExtractPlugin.loader 是函数调用，不能加引号，也不能写成字符串路径
HtmlWebpackPlugin 必须自动插入 link 标签
CSS 文件生成了，但 HTML 里没引用，等于白搭。关键点：
- 插件版本 ≥ 5.0（旧版对 Webpack 5+ asset 支持不全）
- inject: true 要开启（默认就是 true，但别手动关掉）
- template 必须指向真实存在的 HTML 文件（如 src/index.html），不能是空模板
- 别手写
<link href="main.css">—— 哈希名会变，硬编码必 404
publicPath 决定 CSS 里资源路径是否能加载
CSS 文件生成成功，但里面的 url(./img.png) 报 404？大概率是 publicPath 没设对：
立即学习“前端免费学习笔记（深入）”；
- 它控制 CSS 内部相对路径的解析基准，和 HTML 的
<link>路径无关 - 部署到子目录（如 /app/）或 CDN（如 https://cdn.example.com/v2/）时，必须显式传入
- 示例：
new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', publicPath: '/app/' })
避免 Conflicting order 警告
多个 chunk 同时 import 同一个 CSS 文件，顺序不确定就会报 warning：
- 不是简单设
ignoreOrder: true就完事——可能掩盖真实覆盖问题 - 检查是否在不同模块重复 import 公共样式（比如 A.js 和 B.js 都 import './common.css'）
- 统一提到入口文件引入，或用 splitChunks + cacheGroups 归并到同一 CSS chunk
