Webpack 5 打包 Less 报错90%源于 less-loader 版本与配置不匹配，需降级至 v7.3.3、同步安装 less、显式配置 lessOptions.paths 处理 ~ 别名、避免 smp 与 mini-css-extract-plugin 冲突，并升级 less 至 ≥3.13.1 以解决内存溢出。
Webpack 5 打包 Less 报错，90% 是 less-loader 版本与配置不匹配，不是文件路径或语法问题。
less-loader@8.x 直接报 this.getOptions is not a function
这是最典型的版本断层错误：less-loader@8.0.0+ 彻底移除了旧版 API，但你的 Webpack 配置仍按 v7 写法传参（比如直接写 { javascriptEnabled: true }），导致 loader 内部调用 this.getOptions() 失败。
- 立即降级：运行
npm uninstall less-loader && npm install less-loader@7 -D（v7.3.3 是目前最稳的兼容版本） - 不推荐硬升到 v8：它要求 Webpack 5.80+ 且必须用
lessOptions包裹所有参数，稍有遗漏就报Invalid options object - 别只装
less-loader：漏装less编译器本身会触发Cannot find module 'less'—— 必须同时执行npm install less -D
Ant Design 主题引入失败：~antd/es/style/themes/index.less wasn't found
这个报错和文件是否存在无关，本质是 less-loader 没把 ~ 当成 node_modules 别名处理。Less 解析器默认不走 Webpack 的 resolve.alias，必须显式告诉它去哪找。
- 在
less-loader的options中加lessOptions: { paths: [path.resolve(__dirname, 'node_modules')] } - 或者更彻底：在 Webpack 的
resolve.alias和lessOptions.paths里都配~antd: path.resolve(__dirname, 'node_modules/antd') - 临时救急：把
@import '~antd/es/style/themes/index.less';改成@import 'antd/es/style/themes/index.less';（去掉~），靠 Webpack 默认 node_modules 查找逻辑兜底 - 注意 antd@5.x 已废弃该路径：v5 的主题文件在
antd/dist/themes/下，~antd/es/...根本不存在
CSS 和 Less 混用时，speed-measure-webpack-plugin 触发 loader 错乱
加上 smp 后打包失败，但去掉就正常？这不是你配置错了，而是 smp 的 wrap 操作破坏了 mini-css-extract-plugin 对 loader 类型的判断逻辑，尤其在 less-loader 和 css-loader 共存时容易误判。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：直接删掉
smp—— Webpack 5 自带stats: 'verbose'和profile: true已足够定位慢点 - 若坚持要用：回退
mini-css-extract-plugin到@1.3.6（v2+ 与 smp 兼容性差） - 检查所有
rules的exclude：确保/(js|css|json|png|jpg|gif|less)$/显式排除了.less，否则url-loader会提前把 .less 当资源处理，再交给 less-loader 时已不是源码，报Unrecognised input
Less 编译崩溃：JavaScript heap out of memory
这不是内存不够，是 Less 解析器 AST 节点爆炸。常见于深层嵌套、递归 mixin 或通配符 @import，尤其在 Webpack 5 的 watch 模式下反复编译会加速崩溃。
- 升级
less：必须 ≥3.13.1或4.2.0+，新版 AST 回收机制能降内存 40%+ - 禁用
@import "components/*.less"：改成明确路径 +@import (once) "xxx.less" - 压平嵌套：超过 15 层嵌套（如
.a { .b { .c { ... } } }）就该拆成独立 class - 中文路径必炸：Less 原生不识别 UTF-8 路径，
@import "../组件/button.less"会直接卡死；统一用英文路径，或通过lessOptions.paths指定包含中文目录的父路径
真正棘手的从来不是报错信息本身，而是报错位置和实际原因错位——Less 文件里一个没闭合的括号，可能让 Webpack 在完全无关的 CSS 提取阶段崩掉；~ 看似是路径问题，实则是解析器和模块系统两套机制没对齐。动手前先看 less-loader 和 less 的实际版本，比猜报错含义快十倍。
