开发必须用 style-loader，生产才用 minicssextractplugin.loader；publicpath 配错致 css 中 url 资源 404；conflicting order 警告需收敛引入点而非忽略。
直接上结论：不区分环境硬写 MiniCssExtractPlugin.loader，开发时页面必白；不设 publicPath，CSS 里的 url(./img.png) 必 404；不处理 Conflicting order 警告，上线后样式覆盖风险真实存在。
开发用 style-loader，生产才用 MiniCssExtractPlugin.loader
Webpack 5 中 MiniCssExtractPlugin.loader 在开发阶段不注入样式，只参与构建时提取。如果在 module.rules 里直接写死它，webpack serve 启动后 DOM 里没有 <style></style>，也没有 <link>，页面就是白的。
必须用环境变量动态切换 loader：
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader']- 别依赖 Webpack 的
mode字段——它对 loader 行为完全没影响 -
style-loader推荐用 v3.3.0+，旧版 v2.x 在 Webpack 5 下会丢掉insert函数，导致 HMR 失效 - 如想避免重复插入
<style></style>标签，可加配置：{ injectType: 'singleton' }
publicPath 错了，CSS 里的相对路径全 404
CSS 文件能生成，但里面 url(./logo.svg) 加载失败，90% 是因为 MiniCssExtractPlugin 的 publicPath 没配对。它决定 CSS 内部相对路径如何解析，和 output.publicPath 是两回事，且前者优先级更高。
常见部署场景对应写法：
- 部署到子目录（如
/app/）：new MiniCssExtractPlugin({ publicPath: '/app/' }) - 走 CDN（如
https://cdn.example.com/v2/）：new MiniCssExtractPlugin({ publicPath: 'https://cdn.example.com/v2/' }) - 根目录部署（
/）也建议显式写：publicPath: '/'，避免隐式行为差异
出现 Conflicting order 警告，别急着开 ignoreOrder
这个警告不是“警告而已”，是多个模块以不同顺序 import 同一个 CSS 文件（比如 A → B → common.css，同时 C → common.css），最终生成的 CSS 规则顺序不确定，容易引发样式覆盖 bug。
真正解法是收敛引入点：
- 检查是否有多处
import './common.css'，尤其跨异步 chunk 时 - 把公共样式提到主入口统一引入（如
src/index.js） - 或用
splitChunks.cacheGroups把重复 CSS 归并到同一 chunk：chunks: 'all'+ 自定义 name -
ignoreOrder: true只应在确认无样式冲突风险时临时启用，不是长期方案
SCSS/LESS 等预处理器也要同步换 loader
不只是 .css 文件，所有样式类型（.scss、.less、.styl）都得把 loader 数组第一项替换成环境判断逻辑。否则开发时 SCSS 正常，生产却回退到 style-loader，CSS 没被提取。
例如 SCSS 配置应为：
use: [
process.env.NODE_ENV === 'production'
? MiniCssExtractPlugin.loader
: 'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
漏掉任意一种扩展名的 rule，就等于给那个类型开了后门——它绕过提取逻辑，悄悄混进 JS 包里。
最容易被忽略的是：chunkFilename 不带哈希，会导致多个异步 chunk 输出内容一模一样的 CSS 文件；还有不配 css-minimizer-webpack-plugin，提取出的 CSS 就是未压缩的原始文本，体积反而更大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
