必须改用 mini-css-extract-plugin——它是 webpack 5 唯一稳定支持的 css 提取方案，需替换 loader、正确配置 plugins、使用 [contenthash]、确保 postcss-loader 紧跟 css-loader 后，并统一 css 导入顺序以避免层叠冲突。
ExtractTextPlugin 在 Webpack 5 中根本不能用——它早已被官方标记为 DEPRECATED，且不支持 Webpack 5 的模块图（ModuleGraph）和新 chunk 机制。强行安装 extract-text-webpack-plugin@next 会报错，比如：
TypeError: compilation.getCache is not a function
或构建时直接跳过 CSS 提取，最终所有样式仍打包进 JS，导致 FOUC（闪屏）和缓存失效。
必须改用 mini-css-extract-plugin
mini-css-extract-plugin
这是 Webpack 官方推荐、Webpack 5 唯一稳定支持的 CSS 提取方案。
- 安装命令必须带
--save-dev：npm install --save-dev mini-css-extract-plugin - loader 配置里，所有
style-loader都得换成MiniCssExtractPlugin.loader
否则开发环境热更新可能失效，生产环境也不会生成独立 CSS 文件 - plugins 数组中必须 new 实例，否则插件不生效：
new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:8].css' }) -
[contenthash]是关键：用[hash]会导致 JS 变动时 CSS 文件名也变，破坏长期缓存
mini-css-extract-plugin 的 loader 顺序不能错
mini-css-extract-plugin 的 loader 顺序不能错CSS 处理链是「从右往左」执行的，顺序错了，PostCSS 就白配：
- 正确顺序（以
.css为例）：use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] -
postcss-loader必须紧挨css-loader后面，它处理的是css-loader解析后的 CSS AST 字符串，不是原始文件 - 如果把
postcss-loader放在MiniCssExtractPlugin.loader后面，它根本收不到输入，autoprefixer 一个属性都不会加
“Conflicting order” 警告不是 bug，是信号
出现类似这样的警告：
chunk main [mini-css-extract-plugin] Conflicting order. Following module has been added: * ./src/a.css ...
说明多个 chunk（比如主入口 + 动态 import 的模块）对同一组 CSS 文件的导入顺序不一致。
- 这不是配置错误，而是代码组织问题：不同 JS 文件以不同顺序
import了相同 CSS -
ignoreOrder: true只是压制警告，不解决实际层叠冲突，上线后样式可能错乱 - 真正解法是统一 CSS 导入位置：比如只在
main.js或全局index.css中集中引入基础样式，避免分散 import
Webpack 5 的 CSS 提取已经没有回旋余地——ExtractTextPlugin 是条死路，mini-css-extract-plugin 的 loader 顺序、hash 写法、冲突提示，每个细节都卡在构建链路上，漏掉一个，CSS 就不会按你预期的方式落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
