"rules" is not allowed error with Webpack 4

Question

最近我用 webpack@4.39.1 更新了我的 webpack 1，其中根据 Webpack 文档 module.loaders 被 module.rules 替换，我在 webpack.config.js 文件中使用相同的但我仍然收到以下错误： [1] "loaders" 是必需的 [2] "rules" 不允许

我的 webpack.config 看起来像这样：

我已经尝试删除整个 node_modules 文件夹和新的 npm install 以便旧的 webpack 不再可用我也验证了全局 node_modules 但是 webpack 没有全局安装。

    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'ng-annotate-loader',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          compact: false
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)/,
        loader: 'url-loader'
      },
      {
        test: /\.html$/,
        loader: 'html-loader?minimize=false'
      },
      {
        test: /\.json/,
        loader: 'json-loader'
      },
      {
        test: /node_modules(\/|\)globalize/,
        loader: 'imports?define=>false'
      },
      {
        test: /node_modules(\/|\)cldrjs/,
        loader: 'imports?define=>false'
      }
    ]
  },

如果我遗漏了什么，请帮助我。

Answer 1

我正在使用 "webpack": "^4.29.6" 所以你可以与我的配置进行比较

module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }

您可以查看完整配置here

Answer 2

最后我能够通过从我的 webpack.config.js 文件中删除 "webpack-validator" 来解决这个问题，因为 webpack 4+

不再需要它

"rules" is not allowed error with Webpack 4

"rules" is not allowed error with Webpack 4

angular

webpack-4