MiniCssExtractPlugin是Webpack 5中分离CSS的事实标准，须按mode切换loader（开发用style-loader，生产用MiniCssExtractPlugin.loader），并配置contenthash、css-minimizer-webpack-plugin压缩及Less loader正确顺序。
Webpack 5 中配置 Less 并提取独立 CSS 文件，核心是用 mini-css-extract-plugin 替代已废弃的 extract-text-webpack-plugin，且必须区分开发与生产环境的 loader 链。直接复用旧教程里的 style-loader + ExtractTextPlugin 会报错或不生效。
开发环境用 style-loader，生产环境换 mini-css-extract-plugin
Webpack 5 不再支持 extract-text-webpack-plugin，它已被 mini-css-extract-plugin 取代。这个插件不能在开发模式下使用（否则热更新失效），所以必须按 mode 切换 loader：
- 开发时（
mode: 'development'）：用style-loader把 CSS 插入<style></style>标签，支持 HMR - 生产时（
mode: 'production'）：用MiniCssExtractPlugin.loader把 CSS 写入独立文件 - 二者不能混用；如果在 dev 模式下误配
MiniCssExtractPlugin.loader，页面样式会丢失，控制台无报错但里看不到<link>
Less loader 链顺序和参数要严格对齐执行方向
loader 执行顺序是从右到左（数组末尾先执行），所以 less-loader 必须在最右边，css-loader 居中，MiniCssExtractPlugin.loader 或 style-loader 在最左边：
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: { javascriptEnabled: true },
sourceMap: isProduction ? false : true
}
}
]
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 把
css-loader放在less-loader左边 →less-loader输出的 CSS 无法被css-loader解析@import和url() - 漏掉
lessOptions: { javascriptEnabled: true }→ 使用@import动态变量或 JS 表达式时报错 “Inline JavaScript is not enabled” -
sourceMap在 production 开启 → 会生成多余 .map 文件且影响构建速度
mini-css-extract-plugin 的 filename 必须带 contenthash
不加 hash 的 filename: 'styles.css' 会导致浏览器缓存 CSS 文件，即使内容变了也不更新。正确写法是：
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash:8].css'
})
注意点：
-
[contenthash]是基于 CSS 内容生成的，JS 文件变更不会导致 CSS 文件名变化，缓存更精准 - 如果用了
SplitChunksPlugin提取公共 CSS，确保chunks: 'all'且minChunks设置合理，否则部分组件的 Less 可能仍被打包进 JS - 插件必须放在
plugins: []数组里，且不能重复 new 多次，否则构建报错 “Chunk.entryModule is not a function”
别忘了 css-minimizer-webpack-plugin 压缩 CSS
Webpack 5 默认不压缩提取出的 CSS，即使开了 mode: 'production'。不压缩会导致文件体积多出 20%–40%，尤其在大量 Less 嵌套和 mixin 场景下明显。
必须手动安装并配置：
npm install -D css-minimizer-webpack-plugin
然后在 optimization 下启用：
optimization: {
minimizer: [
new CssMinimizerPlugin({
parallel: true,
minimizerOptions: {
preset: ['default', { mergeLonghand: false }]
}
})
]
}
容易忽略的细节：
- 没装
css-minimizer-webpack-plugin时，打包后看到styles/*.css文件体积很大，但控制台没有任何警告 -
parallel: true能显著提升多核机器上的压缩速度，但 CI 环境若 CPU 限制严，可设为false - 如果用了
@charset "UTF-8"或 BOM，压缩器可能报错，建议统一用 UTF-8 without BOM 保存 Less 文件
真正卡住人的地方往往不是配置本身，而是 mode 切换、loader 顺序、hash 策略和压缩四者之间的耦合——改其中一项，另外三项很可能要同步检查，否则构建看似成功，实际线上 CSS 不加载或不更新。
