如何解决Webpack报错：Invalid configuration object

Hey there, let's tackle these Webpack config issues step by step—they're common when adjusting to newer Webpack versions, so no stress!

1. Replace module.loaders with module.rules #

Webpack 2 and later deprecated the loaders property in favor of rules, which is exactly what the first error is flagging:

configuration.module has an unknown property 'loaders'. These properties are valid: object { ... rules? ... }

Before (incorrect):

module.exports = {
  // ... other config
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
};

After (correct):

module.exports = {
  // ... other config
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
};

Quick note: You can still use loader instead of use for single loaders, but use is more flexible if you ever need to chain multiple loaders (like use: ['style-loader', 'css-loader'] for CSS files).

2. Remove Empty String from resolve.extensions #

The second error points to an invalid empty entry in your extensions array:

configuration.resolve.extensions[0] should not be empty.

Webpack 2+ no longer needs an empty string to match files without extensions—leaving it in breaks schema validation.

Before (incorrect):

module.exports = {
  // ... other config
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

After (correct):

module.exports = {
  // ... other config
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Don't worry about importing files without extensions—Webpack will handle that by default now, so you can still write import './Component' instead of import './Component.js' if you prefer.

Full Fixed Config Example #

Here's how your corrected config might look when putting it all together:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      // Add other rules here for CSS, images, fonts, etc.
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Just double-check you're running Webpack 2 or later, and these validation errors should vanish!

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