less-loader单独配置不生效，因其仅将.less编译为CSS字符串，不解析@import/url()等依赖；必须与css-loader（处理依赖）、style-loader（开发注入）或MiniCssExtractPlugin.loader（生产抽离）链式配合，且顺序严格为从右往左执行。
单独配 less-loader 不会生效，必须和 css-loader、style-loader（开发）或 MiniCssExtractPlugin.loader（生产）组成链式处理，且顺序不能错。
为什么 less-loader 单独配置不工作？
less-loader 只负责把 .less 源码编译成纯 CSS 字符串；它不解析 @import './xxx.css' 或 url(./img.png) 这类路径。这些依赖关系必须由 css-loader 处理，否则 Webpack 会报 Module not found 或 You may need an appropriate loader。
- 漏掉
css-loader：变量、嵌套、@import全部失效 - 顺序写反（比如
['less-loader', 'css-loader']）：Webpack 从右往左执行，实际先跑css-loader，它收到的是未编译的 Less 文本，直接崩溃 - 只配了
less-loader和style-loader：缺少中间层，style-loader收到非法输入，注入失败
use 数组的执行顺序到底是怎样的？
Webpack 对 use 数组是**从右往左执行**，不是从上到下。你写的 ['style-loader', 'css-loader', 'less-loader']，真实流程是：
- 最右边的
less-loader先读index.less，输出标准 CSS 字符串 - 中间的
css-loader接收该 CSS，解析其中的@import和url()，转成模块依赖 - 最左边的
style-loader把最终 JS 模块里的 CSS 字符串，动态插入<style></style>标签
所以 less-loader 必须在数组最右，style-loader 或 MiniCssExtractPlugin.loader 必须在最左。
开发和生产环境的 loader 链能混用吗？
不能。开发需要热更新（HMR），生产需要独立 CSS 文件缓存与压缩，二者目标冲突。
- 开发环境用：
['style-loader', 'css-loader', 'less-loader'] - 生产环境必须换：
[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] -
postcss-loader要放在css-loader之后、less-loader之前——它处理的是less-loader输出的 CSS，不是原始 Less - 如果用了
MiniCssExtractPlugin但开发时也配它，HMR 会完全失效，改样式页面不刷新
编译慢？这些配置项必须显式开启
默认 less-loader 是单线程、无磁盘缓存、强制生成 sourceMap 的，大型项目二次构建也全量重跑。
-
cache: true：启用磁盘缓存，结果存在node_modules/.cache/less-loader，避免重复解析@import树 -
thread: true：启用多线程（底层用worker_threads），对含大量 mixins 的文件提速明显 -
sourceMap: false：开发阶段除非真在调试样式映射，否则关掉，减少 IO 和内存开销 -
lessOptions: { javascriptEnabled: true }：如需在 Less 中使用 JS 表达式（比如 Ant Design 5.x），这个必须开
最容易被忽略的是缓存路径和线程开关——不加这两项，哪怕只改一个变量，整个 @import 链也会重新编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
