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