Webpack 配置对象验证错误：“loader”必须是字符串

Question

我正在使用 Webpack Validator 来验证我的 Webpack Config 对象，它给了我以下错误：

[1] "loader" must be a string

这是我的 Webpack 配置对象：

  const config = webpackValidator({
    context: resolve('client'),
    entry: {
      app: './app.js',
      vendor: ['./app.css'],
    },
    output: {
      filename: ifProd('bundle.[name].[chunkhash].js', 'bundle.[name].js'),
      path: resolve('dist'),
      pathinfo: ifNotProd(),
    },
    devtool: ifProd('source-map', 'eval'),
    module: {
      loaders: [
        {test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/},
        {test: /\.jsx$/, loaders: ['babel-loader'], exclude: /node_modules/},
        {
          test: /\.css$/, loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style-loader',
            loader: 'css-loader'
          })
        },
      ],
    },
    plugins: removeEmpty([
      new ProgressBarPlugin(),
      new ExtractTextPlugin(ifProd('styles.[name].[chunkhash.css]', 'styles.[name].css')),
      ifProd(new InlineManifestWebpackPlugin()),
      ifProd(new webpack.optimize.CommonsChunkPlugin({
        name: ['vendor', 'manifest'],
      })),
      new HtmlWebpackPlugin({
        template: './index.html',
        inject: 'head',
      }),
    ]),
  })

任何见解将不胜感激！

Answer 1

“module”的第一个属性是loader，而应该是rules。

module: {
      rules: [{
          test: /\.js$/,
          loaders: ['babel-loader'],
          exclude: /node_modules/
        },
        {
          test: /\.jsx$/,
          loaders: ['babel-loader'],
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style-loader',
            loader: 'css-loader'
          })
        },
      ],
    },

另外，为了避免重复，前两个代码规则可以只是一个 test: /\.(jsx|js)$/