开发环境必须用style-loader，因其支持HMR并动态注入<style>标签；MiniCssExtractPlugin.loader仅在生产构建时提取CSS为文件，开发时无DOM操作，硬启用会导致白屏。
不能直接用 MiniCssExtractPlugin.loader 替代 style-loader 就完事——它只在生产构建时写文件，开发阶段不注入样式，页面会白屏。
为什么开发环境必须用 style-loader？
MiniCssExtractPlugin.loader 在 webpack serve 运行时完全不操作 DOM，也不插入 <style> 标签；它只在 webpack build 阶段把 CSS 内容从 JS chunk 里剥离、写入物理 .css 文件。所以开发时硬切它，页面就没了样式。
- 开发要热更新（HMR），只能靠
style-loader动态替换<style>标签 - 想避免重复
<style>标签，可以加配置：{ injectType: 'singleton' } - Webpack 的
mode字段对 loader 行为无影响，必须靠process.env.NODE_ENV === 'production'判断
怎么写 loader 链才不出错？
loader 执行顺序是从右往左，MiniCssExtractPlugin.loader 必须是第一个（最左边），否则 CSS 提取失败。
- 正确写法：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] - 错误写法：
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']—— 两个 loader 同时生效，结果不可控 -
MiniCssExtractPlugin.loader不接受任何 options，不像style-loader支持{ injectType: 'singleton' } - 所有样式类型都要覆盖：.css、.scss、.less、.styl 规则里都得换掉 loader 首项
提取后图片路径 404 怎么办？
CSS 里写的 url(./img/logo.png) 是相对路径，提取成独立 .css 文件后，它的“当前目录”变了，但 Webpack 默认不重写这些 URL —— 90% 的 404 都卡在这儿。
立即学习“前端免费学习笔记（深入）”；
-
MiniCssExtractPlugin的publicPath选项决定 CSS 内部相对路径如何解析，优先级高于output.publicPath - 部署到子目录（如
/app/）或 CDN（如https://cdn.example.com/v2/）时，必须显式传入：publicPath: '/app/' - 如果用了
file-loader或url-loader，确保它们的publicPath和插件一致，否则图片仍会 404
出现 Conflicting order 警告能 ignore 吗？
这个警告不是噪音，是真实风险：多个模块以不同顺序 import 同一个 CSS 文件（比如 A → B → common.css，C → common.css），最终生成的 CSS 规则顺序不确定，可能覆盖关键样式。
- 不要直接设
ignoreOrder: true，那是掩耳盗铃 - 优先检查是否有多处
import './common.css'，尤其跨 chunk 场景下 - 统一提到入口文件引入，或用
splitChunks.cacheGroups把公共 CSS 归并到同一 chunk -
ignoreOrder: true只应在确认无样式冲突、且短期应急时启用
真正麻烦的不是配置几行代码，而是 publicPath 和 import 顺序这种隐性依赖——它们不报错，但会让生产环境的样式加载变得不可预测。
