SPFx 1.14集成Vue本地部署报webpack Rule单资源源错误如何修复

问题背景 #

开发环境为Node 14.19.1、SPFx 1.14，通过Yeoman脚手架初始化项目后开发Vue单文件组件，执行本地部署时触发webpack子任务报错，错误信息如下：

Error - 'webpack' sub task errored after 131 ms Rule can only have one resource source (provided resource and test + include + exclude) in {
    "enforce": "pre",
    "use": "C:\\workspace\\spfx14\\node_modules\\source-map-loader",
    "exclude": [
        {}
    ]
}

该错误由webpack内置RuleSet校验逻辑触发，校验规则要求单条webpack rule不能同时配置resource属性与test/include/exclude属性，否则会抛出资源源冲突错误。

根因定位 #

SPFx 1.14 版本原生内置依赖webpack 4.x，所有内置loader规则（包括报错提到的source-map-loader规则）都是按照webpack 4的规范编写的。查看项目package.json发现手动安装了webpack 5.73.0，以及一系列适配webpack5的高版本loader（css-loader@6.x、sass-loader@13.x、ts-loader@9.x），版本不兼容导致内置规则在webpack5的严格校验下触发报错。

修复步骤 #

• 卸载手动安装的不兼容高版本依赖，执行以下命令：

npm uninstall webpack css-loader sass-loader ts-loader vue-loader-plugin

注：vue-loader 15.x版本已内置VueLoaderPlugin，无需单独安装vue-loader-plugin包。

• 安装适配webpack4（SPFx1.14内置版本）的对应依赖版本：

npm install --save-dev css-loader@5.2.7 sass-loader@10.2.0 ts-loader@8.3.0

• 修改gulpfile.js中VueLoaderPlugin的引入方式，将原有的单独引入替换为从vue-loader包内引入：

// 原代码 const VueLoaderPlugin = require('vue-loader-plugin');
// 替换为
const VueLoaderPlugin = require('vue-loader/lib/plugin');

• 清理构建缓存后重新执行构建：

gulp clean
gulp bundle

补充说明 #

如果需要使用webpack-bundle-analyzer，安装4.4.2版本即可兼容webpack4，不要安装4.5.0及以上版本，否则也会出现webpack版本兼容问题。自定义添加vue相关loader规则时，不要修改SPFx内置生成的原有规则，仅追加自定义规则即可避免冲突。

内容的提问来源于stack exchange，提问作者user2171002