MiniCssExtractPlugin是生产环境CSS分离的事实标准，必须动态切换loader（开发用style-loader，生产用MiniCssExtractPlugin.loader），并正确配置publicPath、解决Conflicting order警告，且SCSS/LESS等预处理器同样需替换loader首项。
MiniCssExtractPlugin 是唯一能真正把 CSS 提取为独立 .css 文件并在 HTML 中用 <link> 引入的方案——它不是“可选插件”，而是生产环境 CSS 分离的事实标准。
必须替换 loader，否则开发时白屏、生产时无效
MiniCssExtractPlugin.loader 不能直接写死在 module.rules 里。它在开发阶段不注入样式，只参与构建时提取，所以硬编码会导致 webpack serve 启动后页面完全无样式。
正确做法是按环境动态切换 loader：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader']-
isProduction建议用process.env.NODE_ENV === 'production'判断，Webpack 的mode对 loader 行为无影响（Webpack 5+） - 如果用
style-loader，推荐加配置{ injectType: 'singleton' }避免热更新时重复插入<style>标签
publicPath 错了，CSS 里的图片和字体全 404
MiniCssExtractPlugin 的 publicPath 选项控制的是 CSS 内部 url(./img.png) 这类路径的解析基准，不是 HTML 中 <link> 的路径。
常见错误：
- 部署到子目录（如
/admin/）却没设publicPath: '/admin/'→ 图片请求变成/img/logo.png而非/admin/img/logo.png - 用 CDN（如
https://cdn.example.com/v3/）但output.publicPath没同步 → 字体文件 404 -
MiniCssExtractPlugin实例中显式传入publicPath，优先级高于output.publicPath，更可控
多个地方 import 同一 CSS，出现 Conflicting order 警告
这个警告不是“可以忽略的提示”，而是真实风险信号：不同 chunk 以不同顺序引入同一份 CSS，最终生成的 CSS 规则顺序不可控，可能造成样式覆盖失效。解决方向不是关掉警告，而是理清依赖：
- 检查是否在多个组件或工具函数里重复
import './common.css' - 公共样式应统一在入口 JS（如
index.js）顶部引入，避免分散 - 若必须跨 chunk 复用，启用
splitChunks.chunks: 'all'并配cacheGroups把它们归并到同一个 CSS chunk -
ignoreOrder: true只应在确认无样式冲突、且临时上线时使用，长期开启等于放弃样式顺序保障
SCSS/LESS 等预处理器也要换 loader 首项
MiniCssExtractPlugin.loader 必须作为 loader 链的第一个（最右）项，且所有样式类型都要覆盖——不只是 .css。
例如处理 .scss：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
use: ['style-loader', 'css-loader', 'sass-loader']→ 开发可用，但生产无法提取 - 正确写法：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] - 注意执行顺序是从右往左，
MiniCssExtractPlugin.loader必须接在css-loader输出之后
import CSS 的位置：写在路由懒加载组件内部，它就随那个 chunk 加载；写在 utils 里，它就会提前打进 utils chunk —— 这个细节比插件配置更容易被忽略。 
