Webpack配置对象不符合API schema报错求助（附配置代码）

我帮你梳理了下你贴的webpack配置代码，能看到几个明确的问题会触发这个「无效配置对象」的报错：

1. 配置项拼写错误 #

你写的resovle是笔误，webpack的正确配置项名称是resolve（少了一个字母l）。Webpack的配置schema对字段名称有严格要求，传入未知的字段会直接导致初始化失败，同时你的别名配置也不会生效。

2. Loader配置不完整 #

在module.rules里针对.jsx文件的规则中，use: { loade...明显是代码截断了，缺少完整的loader定义。Webpack要求每个规则必须包含合法的loader配置（比如指定loader: 'babel-loader'，必要时还要添加对应的options），不完整的配置会触发schema校验不通过。

额外提示（针对Webpack 4+用户） #

如果你使用的是Webpack 4及以上版本，ExtractTextPlugin已经被官方弃用，推荐替换成mini-css-extract-plugin。虽然这不是当前报错的直接原因，但后续配置CSS提取时会遇到兼容性问题，提前做个提醒。

修正后的配置示例 #

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Webpack3及以下用ExtractTextPlugin，Webpack4+替换为下面的MiniCssExtractPlugin
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/App.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'js/app.js'
  },
  // 修正拼写错误
  resolve: {
    alias: {
      page: path.resolve(__dirname, 'src/page')
    }
  },
  module: {
    rules: [
      // 补全JSX的loader配置
      { 
        test: /\.jsx$/, 
        exclude: /node_modules/, 
        use: { 
          loader: 'babel-loader',
          // 可根据需求添加babel配置，也可以放在.babelrc文件中
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      },
      // CSS规则示例（适配ExtractTextPlugin）
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new ExtractTextPlugin('css/[name].css')
    // Webpack4+替换为：
    // new MiniCssExtractPlugin({ filename: 'css/[name].css' })
  ]
};

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