MiniCssExtractPlugin必须配合loader动态切换、publicPath精准配置和import顺序治理，否则开发白屏、生产404、Conflicting order警告频发；它不支持HMR，仅用于生产构建提取独立CSS文件。
MiniCssExtractPlugin 不是加个插件就能让 CSS 独立成文件——它必须配合 loader 切换、publicPath 控制和 import 顺序治理，否则开发时白屏、生产时资源 404、控制台满屏 Conflicting order。
开发用 style-loader，生产才用 MiniCssExtractPlugin.loader
MiniCssExtractPlugin.loader 在开发阶段完全不注入样式，只参与构建时提取。硬编码在 module.rules 里会导致 webpack serve 启动后页面空白。
- 必须用
process.env.NODE_ENV === 'production'动态判断环境（mode字段对 loader 行为无影响） - 推荐写法：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader'] - 若用
style-loader，可加{ injectType: 'singleton' }避免热更新时重复插入标签
publicPath 错了，CSS 里的 url(./img.png) 全部 404
MiniCssExtractPlugin 的 publicPath 决定 CSS 内部相对路径如何解析，不是 HTML 中 的路径问题。部署到子目录（如 /admin/）或 CDN（如 https://cdn.example.com/v2/）时，必须显式传入。
-
MiniCssExtractPlugin实例中设置的publicPath优先级高于output.publicPath，更可控 - 示例：
new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', publicPath: '/admin/' }) - 漏设或设错，
build.css里url(../images/logo.png)会请求/images/logo.png而非/admin/images/logo.png
出现 Conflicting order 警告，别急着开 ignoreOrder: true
这个警告本质是多个模块以不同顺序 import 同一 CSS 文件（比如 A → B → common.css，C → common.css），导致最终 CSS 规则顺序不可控，可能引发样式覆盖失效。
- 检查是否在多个组件、工具函数或异步 chunk 中分散
import './common.css' - 公共样式应统一在入口 JS（如
index.js）顶部引入 - 若必须跨 chunk 复用，启用
splitChunks.chunks: 'all'并配cacheGroups归并到同一 CSS chunk -
ignoreOrder: true只应在确认无样式冲突且临时上线时使用，长期开启等于放弃顺序保障
.scss / .less 等预处理器也要替换 loader 首项
MiniCssExtractPlugin.loader 必须作为 loader 链的第一个（最右）项，且所有样式类型都要覆盖——不只是 .css。
- 处理
.scss时，use数组首项也得是MiniCssExtractPlugin.loader，后面接css-loader、postcss-loader、sass-loader - 漏掉某类扩展名（比如只配了
/\.css$/却没配/\.scss$/），对应文件仍走style-loader或报错 - loader 链顺序不能颠倒：必须是
[MiniCssExtractPlugin.loader, css-loader, postcss-loader, sass-loader]
真正卡住人的从来不是插件装不上，而是 publicPath 没对齐路径上下文、import 分散在多个 chunk 里又没归并、或者预处理器 loader 漏了一类扩展名——这些地方一错，构建看似成功，运行时却静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
