Webpack配置因query属性不符合API schema报错，求解决方案

问题根源 #

1. Webpack 4+ 不再支持query配置项，需替换为options
2. Babel依赖版本不兼容：babel-loader@9需要Babel 7.x核心包，当前安装的是Babel 6.x版本
3. Webpack-dev-server@4的启动命令已变更

具体修复步骤 #

1. 修改webpack.config.js配置 #

将配置中的query替换为options，并调整loader写法：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      port: 8001,
      hot: true
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
               loader: 'babel-loader',
               options: {
                  presets: ['@babel/preset-env', '@babel/preset-react']
               }
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

注：devServer中的inline配置在webpack-dev-server@4中已被移除，无需保留

2. 更新package.json依赖 #

替换旧的Babel相关依赖，同时修改启动命令：

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack-dev-server": "^4.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.0",
    "babel-loader": "^9.1.2",
    "@babel/preset-env": "^7.22.0",
    "@babel/preset-react": "^7.22.0",
    "html-webpack-plugin": "^5.5.1",
    "webpack-cli": "^5.1.1"
  }
}

说明：

• 移除了Babel 6.x的babel-core、babel-preset-env、babel-preset-react，替换为Babel 7.x的@babel/core、@babel/preset-env、@babel/preset-react
• 将启动命令从webpack-dev-server改为webpack serve，适配webpack-dev-server@4版本

3. 重新安装依赖 #

删除node_modules文件夹和package-lock.json（或yarn.lock），然后执行：

npm install

4. 启动项目 #

执行命令：

npm start

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