症状
构建失败并报 Module parse failed: Unexpected token,并提示可能缺少合适的 loader。webpack 遇到无法解析的语法,因为没有规则匹配该文件类型或位置。常见变体是 node_modules 下仅提供 ESM 的依赖被规则排除在转译之外,现代语法留给解析器处理而导致失败。
诊断
用 –stats detailed 确认报错文件与记号;为该扩展名加规则;对需要转译的依赖显式 include。
npx webpack --stats detailed
根因
webpack 无法解析该文件,因为没有匹配其类型或位置的规则与 loader,于是把原始源码交给不认识该语法的解析器。
修复
为每种导入的文件类型添加或修正 loader 规则,并 include 需要转译的依赖;同时收紧规则,避免处理无关或已构建的文件。
验证
重新构建确认解析错误消失,再运行打包结果并执行此前失败的代码路径。构建成功且运行正确才算 loader 配置正确。
常见陷阱
把 test 写得过宽会意外转译大量文件,拖慢构建并引发次生错误;应按类型精确匹配。