MiniCssExtractPlugin是Webpack 4+中唯一可行的生产级CSS提取方案，必须动态切换loader（开发用style-loader、生产用MiniCssExtractPlugin.loader），正确配置publicPath以解决资源路径问题，并统一入口引入公共CSS避免Conflicting order警告。
MiniCssExtractPlugin 是唯一可行的生产级 CSS 提取方案
Webpack 4+ 中 ExtractTextWebpackPlugin 已废弃，硬编码它会导致构建失败或样式丢失。必须用 MiniCssExtractPlugin 替代——它不是“可选优化”，而是提取 CSS 到独立 .css 文件并生成 <link> 标签的唯一可靠方式。
常见错误是把 MiniCssExtractPlugin.loader 直接写死在 module.rules 里。这样做会让开发服务器（webpack serve）启动后页面白屏，因为该 loader 在 HMR 场景下不注入样式，只参与构建时提取。
- 正确做法：按环境动态切换 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/logo.png) 这类路径的解析基准，不是 HTML 中 <link> 的路径。它优先级高于 output.publicPath，更推荐显式传入。
典型错误场景：
立即学习“前端免费学习笔记（深入）”；
- 部署到子目录（如
/admin/）但没设publicPath: '/admin/'→ 请求变成/img/logo.png而非/admin/img/logo.png - 用了 CDN（如
https://cdn.example.com/v3/）但output.publicPath没同步 → 字体文件返回 404 - SCSS/LESS 中的
@import或url()路径解析异常，本质也是 publicPath 不匹配
解决方式：在 MiniCssExtractPlugin 实例中传入 publicPath，例如 new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash].css', publicPath: '/static/' })。
多个 chunk import 同一 CSS，触发 Conflicting order 警告
这个警告不是“可以忽略的提示”，而是真实风险信号：不同 chunk 以不同顺序引入同一份 CSS，最终生成的 CSS 规则顺序不可控，可能导致样式覆盖失效。
根本原因通常是公共样式被分散引入：
- 在多个组件、工具函数甚至异步模块里重复
import './common.css' - 入口文件未统一收口，导致 splitChunks 把同一份 CSS 拆进多个 chunk
推荐解法：
- 把公共样式（如重置、基础变量、通用工具类）统一在主入口 JS（如
index.js）顶部引入 - 若必须跨 chunk 复用（如微前端子应用共用设计系统），启用
splitChunks.chunks: 'all'并配cacheGroups归并到同一个 CSS chunk -
ignoreOrder: true只应在确认无样式冲突、且临时上线时使用；长期开启等于放弃样式顺序保障
SCSS/LESS 等预处理器要同步替换 loader 首项
只要用了预处理器，就不能只改 .css 规则的 loader。所有匹配 .scss、.sass、.less、.styl 的 rule，其 use 数组第一项都必须替换成 MiniCssExtractPlugin.loader（开发环境仍用 style-loader）。
否则会出现：
- SCSS 文件被提取，但 LESS 文件还在 JS 里内联 → 混合打包行为不一致
- PostCSS 插件（如 autoprefixer）未生效，因
postcss-loader位置错乱 - source map 断链，调试时无法定位原始 SCSS 行号
示例配置片段：
use: [ isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' // ← 顺序不能变，loader 从右往左执行 ]
注意：如果启用了 CSS Modules，css-loader 的 modules 选项需保持一致，否则局部作用域失效。
