修复无效的配置对象。未知属性查询webpack和babel

最近，我正在用最新的版本升级一个节点应用程序，我的应用程序使用webpack构建工具。

我把nodejs webpack和所有的依赖项都升级到了最新版本。

在升级到webpack的最新版本后，得到了一个错误。

以下是在我的node应用上运行npm run start后出现的错误。

PluginError [ValidationError]。无效的配置对象。Webpack被初始化时使用了一个与API模式不匹配的配置对象。

• configuration.module.rules[2]有一个未知属性'query'。这些属性是有效的：object { assert?, compiler?, dependency?}-> 在validate (B:\myblogs\cloudhadoop\node_modules\webpack\node_modules\schema-utils\dist\validate。js:105:11) at validateSchema (B:\myblogs\cloudhadoop\node_modules\webpack\lib\validateSchema.js:78:2) at create (B:\myblogs\cloudhadoop\node_modules\webpack\lib\webpack.js:111:24) at webpack (B:\myblogs\cloudhadoop\node_modules\webpack=lib\webpack.js:142:47) at webpack (B:\myblogs\cloudhadoop\node_modules\webpack\libindex.js:55:16) at B:\myblogs\cloudhadoop/gulpfile.babel.js:108:5 at js (B:\myblogs\cloudhadoop\node_modules\undertaker\libset-task。js:13:15) at bound (domain.js:416:15) at runBound (domain.js:427:12) at asyncRunner (B:\myblogs\cloudhadoop\node_modules\async-done\index.js:55:18) { 错误。[ { keyword: 'oneOf', dataPath: '.module.rules', schemaPath: '#/properties/rules/oneOf' }]

我的项目使用webpack@"4.42.1"，升级到webpack@5.64.4。

在此基础上进一步调试，发现babel-loading的webpack配置导致了一个错误。

module: {
  rules: [
    {
      test: /\.js?$/,
      loader: "babel-loader",
      exclude: /node_modules/,
      query: {
        cacheDirectory: true
      }
    }
  ]
}

在webpack 5中没有查询属性的规则。规则包含query 属性，在最新的webpack 5.x中被删除了，取而代之的是options 属性。

module: {
  rules: [
    {
      test: /\.js?$/,
      loader: "babel-loader",
      exclude: /node_modules/,
      options: {
        cacheDirectory: true
      }
    }
  ]
}

另外，在webpack从旧版本升级的过程中，你也曾经出现过类似的错误。

无效的配置对象。Webpack使用了一个与API模式不匹配的配置对象进行初始化。- 配置。该模块有一个未知的属性'loaders'。

下面是一个webpack的配置对象

module: {
    loaders: [{
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader"
        }
    ]
}

在webpack 4版本以后的版本中，用loaders 替换rules 。

module: {
    rules: [{
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader"
        }
    ]
}

注意。

如果在webpack构建时出现错误，请务必检查以下内容

• 使用正确的webpack版本
• 检查webpack版本是否与Nodejs版本兼容
• 检查webpack版本是否与依赖的webpack版本兼容