Webpack 4 不允许出现“规则”错误答案

【问题标题】："rules" is not allowed error with Webpack 4Webpack 4 不允许出现“规则”错误
【发布时间】：2019-08-07 14:28:50
【问题描述】：

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

我的 webpack.config 如下所示：

我已尝试删除整个 node_modules 文件夹并重新安装 npm，以便旧的 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'
      }
    ]
  },

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

【问题讨论】：

@Tony Ngo，我使我的配置文件模式与您的相同，但仍然出现相同的错误。我的 webpack 版本是 4.39.1
你能帮我添加你的 package.json 或者把你的源代码上传到 github 吗？
@TonyNgo，请在此处查看我的项目 package.json 以及 webpack 配置文件：github.com/mmmathur/AngularMigration

标签： angular webpack-4

【解决方案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

【讨论】：

将我的配置文件模式与您的配置匹配，但仍然出现相同的错误。 ```
我的文件模式与您的匹配，但仍然出现相同的错误。

【解决方案2】：

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

【讨论】：