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

Hey there, let’s get this Webpack issue sorted out for you. The root cause here is straightforward: Webpack 4 and later versions deprecated the module.loaders property in favor of module.rules. That’s exactly why you’re hitting that schema mismatch error when running npm run dev.

1. 确认你的Webpack版本 #

First, let’s verify you’re on Webpack 4+ (since older versions still used loaders). Run this in your terminal:

webpack -v

If the output shows version 4.x or higher, the fix below will apply.

2. 更新Webpack配置文件 #

Locate your webpack.config.js (or the relevant config file for your project) and find the module section. Replace the loaders key with rules.

错误配置示例：

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

修改后的正确配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader' // 也可以继续用loader，但use更推荐，支持多loader数组
    },
    // 其他rules配置...
  ]
}

Note: The use property is more flexible than the old loader field—it lets you pass an array of loaders if you need multiple transformations for a file type.

3. 重新启动开发服务 #

Once you’ve updated the config, run your dev command again:

npm run dev

Webpack should now initialize without the schema error.

额外提醒 #

If your project has other outdated Webpack syntax (like the now-removed CommonsChunkPlugin), you might run into additional errors. But fixing the loaders → rules switch is the critical first step here.

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