执行npm start无法启动React项目，Webpack配置报错

嘿，这个问题我之前也碰到过！原因很明确——你用的是Webpack 4或更高版本，但你的配置文件里还在使用旧版的loaders属性，而Webpack 4+已经把这个属性换成rules了，所以才会抛出这个配置不符合API schema的错误。

下面是具体的解决步骤：

• 找到项目根目录下的webpack.config.js配置文件
• 打开文件后定位到module配置块，把里面的loaders字段直接替换成rules
• 另外，旧版里的loader字段也可以换成更灵活的use（use支持数组形式配置多个加载器）

举个配置修改的例子：
修改前的旧配置：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }
  ]
}

修改后的新配置：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'] // 多个加载器用数组形式，顺序从后往前执行
    }
  ]
}

修改完成后，重新运行npm start，这个报错应该就能解决了。如果之后还有其他报错，大概率是旧版脚手架生成的配置里还有其他Webpack 4不兼容的项（比如旧的CommonsChunkPlugin已经被splitChunks替代），可以针对性地去更新这些配置。

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