Webpack中合并CSS需用css-loader配合MiniCssExtractPlugin，禁用style-loader，确保loader顺序为MiniCssExtractPlugin.loader→css-loader→postcss-loader，入口JS显式import CSS文件。
Webpack里怎么把多个CSS文件打包成一个
直接用 css-loader + MiniCssExtractPlugin 就行，不用手动拼接或写脚本。关键不是“合并”，而是让构建流程把所有 @import 和 import 的 CSS 路径都收进来，统一走一次提取。
- 必须关掉
style-loader（它会把CSS塞进<style>标签，没法合并成文件） -
MiniCssExtractPlugin.loader要放在css-loader前面，顺序错了就导出不了单独文件 - 如果用了
postcss-loader，得确保它在css-loader之后、MiniCssExtractPlugin.loader之前 - 入口 JS 文件里必须显式
import './a.css'或import './b.css'，光有 HTML 的<link>不会被 Webpack 处理
Vue CLI项目中CSS自动合并的配置位置
Vue CLI 3+ 默认隐藏了 webpack 配置，不能直接改 webpack.config.js。要合并 CSS，得在 vue.config.js 里调整 css.extract 和 css.requireModuleExtension。
-
css.extract: true是开关，设为false就退回内联样式，失去合并效果 - 如果用了
css.modules，注意.module.css和普通.css会被当成不同模块，不会跨类型合并 - 全局样式（如
main.css）和组件内<style>标签默认不参与同一轮提取，后者需开启css.extract: { ignoreOrder: true }才能避免警告
遇到“Multiple assets emit to the same filename”报错怎么办
这是 MiniCssExtractPlugin 检测到多个 chunk 输出了同名 CSS 文件，比如两个入口都生成了 main.css，或者异步组件抽出了重复的 chunk.css。
- 检查
optimization.splitChunks是否没配好 —— 特别是cacheGroups里没给 CSS 单独设name或filename - 在
MiniCssExtractPlugin的filename选项里加上[contenthash:8]，比如filename: 'css/[name].[contenthash:8].css' - 如果用了
html-webpack-plugin，确认它没重复注入多个 CSS link —— 它默认按 entry 注入，多 entry 就得多配置chunks
纯HTML项目没有构建工具，还能减少CSS请求数吗
可以，但只能靠预处理或服务端合并，不能靠运行时。浏览器本身不支持原生 CSS 文件级合并，@import 反而增加阻塞请求。
立即学习“前端免费学习笔记（深入）”；
- 用
postcss-import在构建前把所有@import内联展开，再压缩输出单个文件 —— 注意它不处理路径别名，相对路径必须真实存在 - Nginx 可以用
sub_filter动态合并，但只适合静态资源不变的场景，缓存和调试都很麻烦 - CDN 如果支持「资源聚合」功能（如 Cloudflare Pages 的
_redirects+ 构建脚本），本质还是构建期行为，不是 HTML 里写个 link 就能解决的
真正容易被忽略的是：CSS 合并不等于性能提升。如果首屏只需要其中 20% 的样式，合并后反而拖慢渲染。拆分策略比合并动作本身更关键 —— 比如把重置样式、字体定义、主题色这些稳定部分抽成 base.css 单独缓存，比一股脑全塞一起更有效。
