less-loader仅负责将.less编译为css，不参与压缩或提取；必须与css-loader配合解析资源依赖，生产环境需用minicssextractplugin.loader提取独立css文件，并配合postcss-loader和browserslist处理兼容性。
less-loader 本身不参与生产环境 CSS 压缩或提取，它只负责把 .less 源文件编译成 CSS 字符串；真正决定是否提取、压缩、兼容性处理的，是它前面和后面的 loader 及 plugin 配置。
less-loader 必须搭配 css-loader 才能工作
单独写 less-loader 会报错：「You may need an appropriate loader to handle this file type」。因为 Webpack 不认识 .less，但更关键的是，它也不认识原始 CSS 字符串——css-loader 负责解析 @import、url() 等语法并转为模块依赖，这是后续所有处理的前提。
-
less-loader输出的是纯 CSS 文本（比如把.box { width: @width; }编译成.box { width: 200px; }） -
css-loader接收这段文本，解析其中的资源引用，并返回 JS 可消费的模块对象 - 漏掉
css-loader，后续的MiniCssExtractPlugin.loader或style-loader都拿不到合法输入
开发环境用 style-loader，生产环境必须换 MiniCssExtractPlugin.loader
很多人在生产环境仍保留 style-loader，结果打包后 CSS 还在 JS 里，无法被 CDN 缓存、无法异步加载、也无法被 OptimizeCssAssetsWebpackPlugin 压缩——因为那些插件只处理独立的 CSS 文件。
- 开发时用
['style-loader', 'css-loader', 'less-loader']：样式直接注入<style></style>标签，支持 HMR - 生产时必须换成
[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']：MiniCssExtractPlugin.loader会把 CSS 从 JS chunk 中抽出来，生成独立.css文件 - 注意顺序：
less-loader在最右（最先执行），MiniCssExtractPlugin.loader在最左（最后执行）
postcss-loader 和 browserslist 决定兼容性输出质量
less-loader 编译出的 CSS 默认是现代语法（如 display: flex），但实际浏览器支持度取决于 postcss-loader + postcss-preset-env 的配置，而后者读取的是 package.json 里的 browserslist 字段。
- 没配
browserslist或写成"browserslist": ["> 1%", "last 2 versions"]，postcss-preset-env就不会加前缀、也不会降级 -
postcss-loader必须放在css-loader之后、less-loader之前（即less → css → postcss流程） - 错误示例：
['css-loader', 'postcss-loader', 'less-loader']——less-loader还没运行，postcss-loader就去处理未编译的 less 源码，直接报错
OptimizeCssAssetsWebpackPlugin 在 Webpack 5+ 已非必需
Webpack 5 内置了 CSS minimizer（基于 css-minimizer-webpack-plugin），只要你在 optimization.minimizer 中显式启用，就不用再装 optimize-css-assets-webpack-plugin——后者在 Webpack 5 下已废弃，且和内置压缩器冲突导致 CSS 不压缩。
- Webpack 4：需手动
npm install optimize-css-assets-webpack-plugin -D并在plugins中 new - Webpack 5+：推荐用
css-minimizer-webpack-plugin，并在optimization.minimizer中声明 - 无论哪个版本，都必须确保 CSS 是独立文件（即用了
MiniCssExtractPlugin），否则压缩器根本找不到目标
最容易被忽略的一点：less 文件里 @import 的路径解析默认基于当前 less 文件位置，不是 Webpack 的 resolve.alias；如果要用别名（比如 @import '~@styles/vars.less'），得在 less-loader 的 options 里加 paths 或用 alias 配合 javascriptEnabled: true，否则构建时提示「Cannot resolve import」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
