Webpack代码分割导致CSS顺序不可控，因MiniCssExtractPlugin按JS chunk依赖图而非源码import顺序提取CSS；需用splitChunks.cacheGroups显式设基础样式高优先级、禁用动态import关键CSS、手动控制HTML中link位置并每次构建后验证。
Webpack代码分割为什么会让CSS顺序不可控
MiniCssExtractPlugin 默认按 JS chunk 的依赖图提取 CSS，而不是按 import 语句在源码中的书写顺序。比如 button.js 和 header.js 都 import 了 common.css，但 Webpack 可能因 chunk id 或构建缓存，把 common.css 的内容插进 main.css 的中间位置，甚至晚于你期望覆盖它的 custom.css。
用 splitChunks.cacheGroups 显式控制基础样式优先级
别依赖 JS 入口的 import 顺序，改用 Webpack 的分块策略强制“底层样式先打包”：
- 在
webpack.config.js的optimization.splitChunks中定义cacheGroups - 给重置、变量、Bootstrap 等基础样式单独命名并设高
priority（如100） - 确保它们不被懒加载 chunk 拦截，加
enforce: true和test: /\/(reset|variables|bootstrap)\.css$/i
cacheGroups: {
vendorBase: {
name: 'vendor-base',
test: /\/(reset|variables|bootstrap|tailwind)\.css$/i,
priority: 100,
enforce: true,
}
}
避免动态 import() 引入关键 CSS
用 import('./theme.css') 加载样式时，Webpack 会把它打成异步 chunk，插入时机不可控——哪怕它物理上写在 main.js 最前面，最终生成的 也可能排在所有同步样式之后。
- 所有影响全局布局、重置、变量的 CSS，必须通过同步
import进入主 chunk - 只对真正按需加载的页面级主题或暗色模式等非关键样式，才用动态 import
- 动态加载后手动插入
到特定位置（如 Bootstrap 之后），不能依赖默认行为
生产环境别信 HTML 模板里的 顺序
html-webpack-plugin 在注入 CSS 时，默认把 MiniCssExtractPlugin 输出的 chunk 插到 末尾，不管你在 index.html 里怎么排 —— 它只认 chunk 名，不认你写的 标签。
- 禁用
inject: true，改用inject: 'head'+chunksSortMode: 'dependency' - 更可靠的做法：在
public/index.html里手写，并放在其他自定义之前 - 确认最终生成的 HTML（不是源模板），看
vendor-base.css是否真出现在main.css之前
真正的难点不在配置本身，而在于「同一份 webpack.config.js」在不同机器、不同 Node 版本、不同依赖树下，splitChunks 的实际分块结果可能不一致 —— 必须每次构建后检查生成的 HTML 和 CSS 文件内容，不能只信本地开发效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
