javascript - webpack 5 : Invalid configuration object. 已使用与 API 模式不匹配的配置对象初始化 Webpack

Question

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

应用类型:电影列表小应用
框架:React 16.18
状态管理:React Context
测试框架:Jest、Enzyme、Supertest
服务器:Node/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 watch 使用 webpack -d source-map watch