环境

• node@14.17.6
• vue@2.6.12
• vue-template-compiler@2.6.12
• vue-loader@15.10.0
• webpack@5.66.0

问题描述

因vue-loader版本问题，导致webpack@5报Error: Compiling RuleSet failed: Properties generator are unknown (at ruleSet[0].rules[0]: [object Object])错误

原因

vue-loader没有兼容webpack@5的 rule.generator 导致爆出上述错误

解决方案

升级vue-loader至@15的最新版本@15.10.0（看到有些资料说vue@2对应vue-loader@15，官方文档查不到此类描述，但试了简单升级到@16以及@17发现确实解决不了问题）

解决过程

下午创建工程用webpack@5编译vue@2项目时遇到了报错，具体错误如下：

Error: Compiling RuleSet failed: Properties generator are unknown (at ruleSet[0].rules[0]: [object Object])

先是习惯性的在Google上进行搜索，不过没有得到太有用的结果，基本回答的方向是版本问题。这个时候如果直接搜不到原因，可以考虑转变思路，聚焦到报错信息上，大概可以定位到rules上，于是挨个将清空，逐步缩小范围，最终判定是这两个rule导致的：

{
    test: /\.(png|jpg|jpeg|gif|ico|svg)$/i,
    type: 'asset/resource',
    generator: {
        filename: 'static/img/[name]-[contenthash:8][ext]'
    }
},
// 字体
{
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource',
    generator: {
        filename: 'static/font/[name]-[contenthash:8][ext]'
    }
}

更具体地说，是因为generator属性报了错，但这个属性按照webpack文档的说明是一定没错的，继续上网查，发现了个issue：Webpack@5 asset generator property not supported，发现问题似乎是和vue-loader有关，其中这段 描述 很重要，让我们把关注点放在了这可能是vue-loader的一个bug，于是我们想到通过升级vue-loader来达到目的。其中之在另外一个issue里看到这样一个 评论，这个评论提到vue@2对应的是vue-loader@15，所以我们升级到最新的15.10.0得以将问题解决