MiniCssExtractPlugin需配合loader分支、publicPath配置和导入顺序控制：开发用style-loader支持HMR，生产用MiniCssExtractPlugin.loader抽离CSS；publicPath决定CSS内相对路径解析，子目录或CDN需显式设置；多处import同一CSS引发Conflicting order警告，应统一入口引入或splitChunks归并；SCSS/LESS等预处理器同样需替换loader首项。
MiniCssExtractPlugin 不是“加个插件就能抽 CSS”——它必须配合 loader 替换、环境判断和路径控制，否则开发时样式不显示、生产时资源 404、顺序警告满屏报错。
开发环境用 style-loader，生产才用 MiniCssExtractPlugin.loader
MiniCssExtractPlugin.loader 在开发阶段完全不注入样式，只在生产构建时生成独立 .css 文件。如果直接写死 MiniCssExtractPlugin.loader，webpack serve 启动后页面就是白的。
- 必须用
process.env.NODE_ENV === 'production'做 loader 分支，mode字段对 loader 行为无影响（Webpack 5+） - 推荐写法：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader'] - 开发时
style-loader支持 HMR；若想避免重复<style>标签，可加配置{ injectType: 'singleton' }
publicPath 配置错，CSS 里 url(./img.png) 就 404
CSS 文件能生成，但内部引用的图片、字体等资源加载失败，90% 是因为 publicPath 没设对。它决定 CSS 中相对路径如何解析，不是 HTML 的 <link> 路径问题。
-
MiniCssExtractPlugin的publicPath选项优先级高于 Webpackoutput.publicPath - 部署到子目录（如
/app/）或 CDN（如https://cdn.example.com/v2/）时，必须显式传入publicPath - 示例：
new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', publicPath: '/app/' })
出现 Conflicting order 警告，不能简单设 ignoreOrder: true
这个警告本质是多个模块按不同顺序 import 同一 CSS 文件（比如 A → B → style.css，C → style.css），导致最终 CSS 规则顺序不确定。强行忽略会埋下样式覆盖 bug。
立即学习“前端免费学习笔记（深入）”；
- 检查是否有多处
import './common.css'，尤其在跨 chunk 场景下 - 把公共样式提到入口文件统一引入，或用
splitChunks.chunks: 'all'+cacheGroups归并到同一 CSS chunk -
ignoreOrder: true只应在确认无样式冲突风险时临时启用，不是长期解法
SCSS / LESS 等预处理器要同样替换 loader
不只是 .css，所有样式文件类型（.scss、.less、.styl）都得用 MiniCssExtractPlugin.loader 替换原始 loader 链首项。
- 错误写法：
use: ['style-loader', 'css-loader', 'sass-loader']→ 开发 OK，生产无效 - 正确写法：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'] - PostCSS 必须放在
css-loader之后、sass-loader之前（即：loader 执行顺序从右往左）
真正容易被忽略的是：MiniCssExtractPlugin 的行为完全受制于 loader 链的环境分支和 publicPath 的粒度控制——它不自动适配你的部署路径，也不感知你有没有多处 import 同一 CSS，所有这些都得手动对齐，差一点就出问题。
