Question

最近我用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'
      }
    ]
  },

如果我缺少任何东西，请帮助我。

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+不再需要

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

2 个答案: