Webpack搭配Babel运行失败，配置对象不符合API schema

Hey there, let's break down and fix this Webpack error you're running into!

The Root Cause #

The critical error message here is:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'

You're using Webpack 4 (version 4.8.3 per your package.json), but your webpack.config.js is still using the old module.loaders syntax from Webpack 3 and earlier. Webpack 4 replaced this with module.rules as the standard configuration key for loaders.

Step-by-Step Fix #

Update your webpack.config.js to replace module.loaders with module.rules (we can also tweak the loader syntax to align with Webpack 4's preferred style):

const path = require('path');
module.exports = {
 entry: ['./app/index.js'],
 output: {
 path: path.resolve(__dirname, 'build'),
 filename: 'bundle.js'
 },
 module: {
  // Replace "loaders" with "rules" here
  rules: [
   { 
     test: /\.js$/, 
     exclude: /node_modules/,
     // Webpack 4 prefers using "use" for loader definitions (more flexible)
     use: 'babel-loader'
   }
  ]
 },
 devServer: {
 port: 3000,
 contentBase: './build',
 inline: true
 }
}

Quick Notes #

• Your Babel dependencies are correctly matched: babel-loader@7.x works with babel-core@6.x, so no changes needed there.
• You already have webpack-cli installed (required for Webpack 4 to run commands), so that's covered.
• While not the immediate issue, your Node.js version (v6.10.0) is quite outdated. Webpack 4 recommends Node.js v8.9.0 or higher—upgrading later could prevent future compatibility headaches.

Once you save the updated config, run npm start again, and the dev server should launch without that schema error.

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