Webpack 4.1.1配置报错：configuration.module含未知属性'loaders'

嘿，这个问题我太熟了！Webpack 4 对配置文件的结构做了关键调整，你碰到的就是最常见的兼容性问题之一：

无效的配置对象。Webpack使用了不符合API schema的配置对象初始化 - configuration.module存在未知属性'loaders'。

问题根源 #

Webpack 4 彻底废弃了 module.loaders 这个配置项，取而代之的是 module.rules。其实这个变更从Webpack v2就开始逐步推进，到v4正式移除了旧写法的支持。

修复步骤 #

把你配置文件里的 module.loaders 直接替换成 module.rules 就行，另外单个loader的写法也有更标准的新方式：

旧的配置（Webpack 3及之前）：

module.exports = {
  // ...其他配置
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

新的配置（Webpack 4+）：

module.exports = {
  // ...其他配置
  module: {
    rules: [  // 这里把loaders改成rules
      {
        test: /\.js$/,
        use: 'babel-loader',  // 推荐用use替代loader，当然旧的loader写法暂时也兼容，但use是标准新写法
        exclude: /node_modules/
      }
    ]
  }
}

额外提示 #

如果你的配置里需要多个loader处理同一种文件，Webpack 4推荐用数组形式的use来声明，比如处理CSS文件：

rules: [
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  }
]

这样修改后，重新运行Webpack应该就能正常工作啦！

内容的提问来源于stack exchange，提问作者Ogglas