Webpack配置报错：configuration.module存在未知属性'loaders'求助

嘿，这个问题我熟！你遇到的是Webpack版本升级后语法不兼容的典型问题：

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

这个报错的核心原因很简单：你当前使用的是Webpack 2.x及以上的版本，但配置文件里还在沿用Webpack 1.x的旧语法。从Webpack 2开始，官方就把module.loaders这个配置项替换成了module.rules，旧的loaders属性已经不再被支持，所以Webpack会判定你的配置不符合API规范。

具体修复步骤： #

• 打开你的Webpack配置文件（通常是项目根目录下的webpack.config.js）
• 找到配置中的module.loaders部分，把loaders替换成rules
• 同时，单个规则里的loaders字段也要换成use（如果是单个加载器可以直接写字符串，多个加载器则用数组）

错误配置 vs 正确配置示例 #

旧的错误配置：

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

修正后的正确配置：

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

额外提醒 #

如果你的配置里还有其他Webpack 1.x的旧语法（比如某些插件的调用方式），建议一并检查升级，避免后续出现其他兼容性问题。但当前这个报错的核心修复就是把module.loaders换成module.rules，替换后重新运行Webpack应该就能正常工作了。

内容的提问来源于stack exchange，提问作者S.M_Emamian