必须用minicssextractplugin替换style-loader，否则css无法提取为独立文件；公共样式是否抽离取决于import位置和splitchunks配置，而非插件自动决定——开发用style-loader支持hmr，生产必须切换为minicssextractplugin.loader并配合splitchunks.chunks: 'all'及cachegroups规则实现按需拆分。
必须用 mini-css-extract-plugin 替换 style-loader，否则 CSS 无法拆出文件；公共样式是否被抽离，取决于 import 位置和 splitChunks 配置，不是插件自动决定的。
为什么 style-loader 不能用于生产环境拆分
它把 CSS 内联进 JS bundle，导致首屏白屏（FOUC）、CSS 无法独立缓存、JS 更新时样式被迫重下。Webpack 5 构建时根本不会生成 .css 文件——你看到的只是 JS 里一段字符串。开发时保留它是为了热更新；生产必须切走。
关键操作：
- 在
module.rules中移除style-loader，改用MiniCssExtractPlugin.loader - 只在
process.env.NODE_ENV === 'production'时启用该 loader，开发仍用style-loader -
MiniCssExtractPlugin.loader必须放在css-loader（及postcss-loader、less-loader等）之后，顺序不可颠倒
splitChunks 怎么抽公共 CSS
CSS 模块只有被 mini-css-extract-plugin 提取为独立资源后，才能参与 splitChunks。默认它只处理 JS，所以必须显式开启：
- 设
splitChunks.chunks: 'all'，否则 CSS 被忽略 - 在
cacheGroups中配test: /\.css$/，并指定name（如'common'） -
minChunks: 2表示至少被两个 chunk 引入才抽，避免误抽单次使用的样式 - 若某 CSS 被入口文件和异步组件同时 import，且满足
minChunks，它就会进common.css；否则留在各自 chunk
import 位置决定“按需”还是“全量”
CSS 是否随某个异步 chunk 加载，完全由你在 JS 中 import 它的位置决定，跟插件无关：
- 写在
index.js顶部：import './base.css'→ 打进main.js→ 首屏必加载 - 写在
React.lazy(() => import('./Dashboard'))对应的组件内部：import './dashboard.css'→ 和该组件 JS 一起进异步 chunk → 路由访问时才加载 - 错误示范：在工具函数文件
utils.js里 import 业务组件的chart.css→ 它会提前打进utils.jschunk，破坏按需逻辑
容易被忽略的兼容细节
mini-css-extract-plugin 在开发模式下不支持 HMR，强行启用会报错或触发全页刷新；ignoreOrder: true 是危险开关——它关闭对 @import 和 url() 加载顺序的校验，仅限确认无样式覆盖冲突、且临时上线时用，长期开启等于放弃样式顺序保障。
另外，CSS Modules 默认不作用于 .css 文件，只认 .module.css；想全局启用需配 css-loader 的 modules: { auto: true }，但会破坏已有全局类名引用，务必评估迁移成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
