@electron-forge/plugin-webpack报configuration.module.rules[2]错误如何解决

DevOps 小满

2026-10-16

解决方案

错误根因

你遇到的报错是因为webpack.renderer.js中往module.rules数组里新增的第三条规则（索引为2）的格式不符合当前webpack版本的API要求，要么不是合法的规则对象，要么包含不被支持的字段、缺少必填字段。

排查修复步骤

定位错误规则
先在webpack.renderer.js中你执行rules.push操作的前/后添加打印代码，输出完整的规则数组：
```
// 添加到rules.push代码之后
console.log('所有loader规则：', JSON.stringify(module.exports.module.rules, null, 2))
```
重新执行yarn start，在终端找到索引为2的规则，对照报错提示给出的合法字段列表检查：必填的test字段是否存在、是否有拼写错误的字段、是否使用了已废弃的配置项。
常见错误场景及修复方案
以下是最容易触发该报错的几种写法，可对照修正：
- 场景1：push了非对象类型的内容，比如字符串、数组、undefined
  错误示例：
```
rules.push('css-loader') // 直接传loader字符串，没有包装成规则对象
```
  正确写法：
```
rules.push({
  test: /\.css$/, // 必须指定匹配的文件类型
  use: ['style-loader', 'css-loader'] // 多个loader放在use数组里
})
```
- 场景2：用了webpack5已废弃的配置
  如果你用的是webpack5，loader字段仅支持传入单个loader字符串，不能传数组，多个loader必须用use字段：
  错误示例：
```
rules.push({
  test: /\.less$/,
  loader: ['style-loader', 'css-loader', 'less-loader']
})
```
  正确写法：
```
rules.push({
  test: /\.less$/,
  use: ['style-loader', 'css-loader', 'less-loader']
})
```
- 场景3：缺少必填的匹配规则，或者字段拼写错误
  比如漏写test字段、把test拼成Test、use拼成ues等，都属于格式错误。
规避重复规则冲突
Electron Forge的webpack插件默认已经内置了css、图片、字体等静态资源的处理规则，如果你新增的规则和内置规则重复，也可能出现格式兼容问题。如果不是必须自定义处理逻辑，直接删除你自己push的重复规则即可。