webpack 5：无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化

Question

我升级到 webpack 5 mid-project（一个小型​​电影列表迷你应用程序），因为我在测试 webpack 4 和 React Context 时遇到问题，现在 Webpack 没有使用我的旧配置文件或看似任何配置文件进行编译我试着给它。如果必须，我会回滚到 webpack 4，但在某些时候我可以想象 webpack 4 将被弃用，所以如果可以的话，我不妨现在学习如何使用 webpack 5。

应用类型：电影列表小应用
框架：React 16.18
状态管理：React Context
测试框架：Jest、Enzyme、Supertest
服务器：节点/Express

这是它给我的错误信息：

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that 
does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.
 - configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
   object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.

这是我的 webpack 配置：

    const webpack = require('webpack');
    const path = require('path');
    const SRC_DIR = path.join(__dirname, '/client/src');
    const DIST_DIR = path.join(__dirname, '/client/dist');
    
    module.exports = {
      entry: `${SRC_DIR}/index.jsx`,
      output: {
        path: DIST_DIR,
        filename: 'bundle.js'
      },
    
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: [
                "@babel/preset-react",
                "@babel/preset-env"
              ]
            }
          }
        ]
      },
      resolve: {
        extensions: ['.js', '.jsx']
      },
    };

这是我的 .babelrc：

    {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-react-jsx",
        "@babel/plugin-transform-runtime"
      ]
    }

这是我的 package.json：

    {
      "name": "xxxxxxxxxx",
      "version": "1.0.0",
      "description": "xxxxxxxxxxxxxxxxx",
      "main": "server/server.js",
      "scripts": {
        "start": "nodemon server/server.js",
        "react-dev": "webpack -d --watch",
        "test": "jest"
      },
      "jest": {
        "setupTestFrameworkScriptFile": "./client/src/setupTests.js"
      },
      "repository": {
        "type": "git",
        "url": "xxxxxxxxxxxxxxxxxxxxx"
      },
      "author": "Owen Wexler",
      "license": "ISC",
      "bugs": {
        "url": xxxxxxxxxxxx"
      },
      "homepage": "xxxxxxxxxxxxxxx",
      "dependencies": {
        "axios": "^0.21.0",
        "express": "^4.17.1",
        "jest": "^26.6.3",
        "prop-types": "^15.7.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-transform-react-jsx": "^7.10.4",
        "@babel/plugin-transform-runtime": "^7.12.1",
        "@babel/preset-env": "^7.12.7",
        "@babel/preset-react": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "babel-jest": "^26.3.0",
        "babel-loader": "^8.2.2",
        "check-prop-types": "^1.1.2",
        "enzyme": "^3.10.0",
        "enzyme-adapter-react-16": "^1.14.0",
        "jest-enzyme": "^7.1.0",
        "moxios": "^0.4.0",
        "regenerator-runtime": "^0.13.7",
        "supertest": "^5.0.0",
        "webpack": "^5.10.0",
        "webpack-cli": "^4.2.0"
      }
    }

我不确定我做错了什么，因为我的配置遵循我在 createapp.dev 和其他地方看到的大多数 webpack 配置，并且似乎无法得到关于如何修复它的直接答案，所以它可以从文档或其他任何地方正确编译。任何帮助将不胜感激，谢谢！

Answer 1

基于 loganfsmyth 的评论：

用webpack -d source-map watch代替webpack -d watch