Webpack配置报错：配置对象不符API schema，存在未知属性'rules'

这个问题是Webpack 2.x及以上版本的配置规范变化导致的，核心问题有两个：

• 你把rules直接放在了配置的根对象里，而Webpack 2+要求loader规则必须嵌套在module.rules下
• 根配置里存在自定义属性（非Webpack官方允许的属性），新版本不再支持这种写法

分步解决方案 #

1. 调整rules的位置

把原来根级的rules数组，移动到module对象的rules属性中，这是Webpack 2+的标准写法。

举个修改前后的例子：
错误配置：

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  // ❌ 错误：rules直接在根级
  rules: [
    { test: /\.css$/, use: ["style-loader", "css-loader"] }
  ]
};

正确配置：

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  // ✅ 正确：rules嵌套在module下
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] }
    ]
  }
};

2. 处理自定义属性

如果你的配置里有Webpack官方属性之外的自定义项（比如旧写法里的babel、eslint全局配置），有两种处理方式：

• 推荐方式：把自定义配置移到对应loader的options属性中，每个loader的配置独立维护
• 兼容方式：如果暂时不想大规模修改，使用LoaderOptionsPlugin来包裹旧的自定义配置

示例（以babel配置为例）：
移到loader options的写法：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        // ✅ 把原来的babel全局配置移到这里
        options: {
          presets: ["@babel/preset-env"]
        }
      }
    ]
  }
};

用LoaderOptionsPlugin兼容的写法：

const webpack = require("webpack");

module.exports = {
  // ...其他配置
  plugins: [
    // ✅ 用插件包裹旧的自定义配置
    new webpack.LoaderOptionsPlugin({
      options: {
        babel: {
          presets: ["@babel/preset-env"]
        }
      }
    })
  ]
};

额外检查 #

• 对照Webpack官方文档，确保根配置里只保留合法属性（比如entry、output、module、plugins、mode等）
• 如果你的项目是从Webpack 1.x升级来的，建议逐步把所有旧配置迁移到新规范，避免依赖兼容插件带来的潜在问题

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