MiniCssExtractPlugin不能单独使用，必须配合环境区分的loader切换、HtmlWebpackPlugin自动注入、显式publicPath配置及splitChunks解决顺序警告，否则开发白屏、生产404或样式覆盖。
不能只加 MiniCssExtractPlugin 插件就完事——它不自动注入、不处理路径、不区分环境，直接用会白屏或 404。
loader 必须按 NODE_ENV 切换，否则开发时页面空白
MiniCssExtractPlugin.loader 在开发阶段完全不注入样式，只标记提取位置；style-loader 才负责把 CSS 插入 <head> 并支持 HMR。两者不能共存，也不能写死。
- 必须用
process.env.NODE_ENV === 'production'做判断，Webpack 的mode字段对 loader 行为无影响（Webpack 5+） - 推荐写法：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader'] - 开发时想避免重复
<style>标签，可给style-loader加配置{ injectType: 'singleton' }
HtmlWebpackPlugin 是唯一能自动注入 <link> 的环节
MiniCssExtractPlugin 只生成 .css 文件，不碰 HTML；没配 HtmlWebpackPlugin 或没开 inject: true（默认开启），CSS 就只是躺在 dist/ 里，浏览器根本加载不到。
-
HtmlWebpackPlugin版本必须 ≥ 5.0，旧版无法正确读取 Webpack 5+ 的 asset 信息 -
template必须指向真实存在的 HTML 文件（如src/index.html），空模板或只有<div id="app"></div>会导致注入失败 - 别手动在模板里写
<link href="main.css">——哈希名会错位，交给插件自动注入
publicPath 错配，CSS 里的 url(./img.png) 全 404
CSS 中的相对路径（如 url(./logo.png)）解析起点是 <link> 的 href 所在目录，不是 HTML 文件位置，也不是 JS chunk 路径。这个解析逻辑由 MiniCssExtractPlugin 的 publicPath 控制，优先级高于 output.publicPath。
立即学习“前端免费学习笔记（深入）”；
- 部署到子目录（如
/app/）或 CDN（如https://cdn.example.com/v2/）时，必须显式传入publicPath - 示例：
new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', publicPath: '/app/' }) - 如果 CSS 输出到
dist/css/main.css，但<link>被注入到根路径<link href="main.css">，那所有url(./xxx)都会从根开始找，必然 404
Conflicting order 警告不是警告，是潜在样式覆盖 bug
这个提示本质是多个模块以不同顺序 import 同一 CSS 文件（比如 A → B → style.css，C → style.css），导致最终 CSS 规则顺序不确定。强行设 ignoreOrder: true 只是掩盖问题。
- 根本解法：统一入口引入（如全在
index.js里 import），或用splitChunks归并相同 CSS 模块 - SCSS/LESS 等预处理器同样适用——只要 loader 链首项换成
MiniCssExtractPlugin.loader，其余保持不变 - 注意：插件本身不处理 CSS 内容顺序，只提取；顺序问题必须在模块依赖结构层面解决
最常被忽略的是 publicPath 和 HtmlWebpackPlugin.inject 的联动关系：一个错，整个样式链就断，而且错误表现是资源 404 或白屏，不容易定位到根源。
