必须用 minicssextractplugin 替换 style-loader 才能提取独立 css 文件，生产环境启用 splitchunks 配置 cachegroups 实现公共样式合并，vite 默认支持自动 css 分割无需手动配置。
Webpack 中如何让 CSS 自动提取为独立文件
默认情况下，Webpack 的 style-loader 会把 CSS 内联进 JS bundle，无法实现真正的 CSS 代码分割。必须用 MiniCssExtractPlugin 替换 style-loader，才能输出单独的 .css 文件。
关键点在于：构建时分离、运行时不内联、支持按需加载（配合 import()）。
- Webpack 5+ 需在
module.rules中将style-loader换成MiniCssExtractPlugin.loader - 必须在
plugins中添加new MiniCssExtractPlugin()，否则不生效 - 开发环境慎用 ——
MiniCssExtractPlugin.loader不支持 HMR，建议开发时保留style-loader，生产环境才切换 - 若使用
css-loader，记得开启importLoaders: 1（尤其搭配postcss-loader时）
怎样让多个入口/异步模块共享同一份公共 CSS
Webpack 默认不会把分散在不同 import 中的相同 CSS 规则自动合并。要提取公共样式，得靠 splitChunks 配置 + 正确的 chunk 分组逻辑。
- 启用
splitChunks.chunks: 'all'，否则只处理异步 chunk - 针对 CSS 单独配置
cacheGroups，匹配/\.css$/i，并设name: 'common-css'或使用enforce: true强制提取 - 若项目有多个入口（如
app和admin），且都引入了normalize.css或自定义base.css，它们会被归入同一 chunk，前提是这些文件被实际 import 进 JS 模块中 - 注意：CSS in JS（如 styled-components）或
<style></style>标签内联样式，不会进入此流程
Vite 下 CSS 代码分割是否需要手动配置
Vite 默认就做了——无需插件，也不用写 splitChunks。它基于 ES 动态导入自动切分 CSS，并将重复引用的样式 dedupe 后注入到首个用到它的页面。
- 只要用了
import('./module.scss')或defineAsyncComponent，对应 CSS 就会随 chunk 单独生成（如chunk.abc123.css） - 全局样式（
main.css）和通过@import引入的样式，会被打包进style.css；但若某异步模块里又@import了同一文件，Vite 会跳过重复注入 - 没有
MiniCssExtractPlugin的概念，也不支持强制提取“所有组件共用的基础样式”为一个固定文件名（如base.css），这是设计取舍 - 如需更细粒度控制，可借助
vite-plugin-css-injected-by-js等社区插件，但会绕过原生优化路径
为什么 extract-text-webpack-plugin 已淘汰，而 MiniCssExtractPlugin 也有兼容风险
extract-text-webpack-plugin 不支持 Webpack 4+，早就停更；MiniCssExtractPlugin 虽是官方推荐，但在某些组合下仍容易出问题。
- 与
css-minimizer-webpack-plugin版本不匹配时，可能报TypeError: compiler.hooks.compilation is not a function - 使用
postcss-preset-env且开启stage: 4时，若 CSS 中含@layer，旧版css-loader（ - SSR 场景下，
MiniCssExtractPlugin生成的 CSS 文件无法在 Node 端运行时注入，需额外用webpack-node-externals排除或改用isomorphic-style-loader - 最易忽略的一点：当 CSS 文件本身被
url()引用字体或图片时，Webpack 必须同时配置assetModuleFilename，否则产出路径错乱，浏览器 404
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
