Javascript 设置Webpack和Babel的问题

我遵循了设置webpack和babel的所有说明。我使用npm安装来安装依赖项——save dev webpack webpack dev server@babel/core babel loader@babel/preset env@babel/polyfill。我还安装了webpack cli。 以下是我的package.json文件中的内容：

{
  "name": "webpack_babel_prac",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "wepack-dev-server --mode development --open",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.1.0",
    "webpack": "^5.3.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

以下代码是我在webpack.config.js文件中的代码

    const path = require('path');

    module.exports = {
      entry: {
        app: ['@babel/polyfill','./src/app.js']
      },
      output:{
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
      },

      module: {
        rules: [
          {
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            
           query:{
              presets: ['@babel/preset-env']
           }
          }
        ]
      }
    }

当我运行build（npm运行build）时，它总是给我错误信息：

> webpack_babel_prac@1.0.0 build /Users/sel/Desktop/js_course/webpack_babel_prac
> webpack

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - 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.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack_babel_prac@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the webpack_babel_prac@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sel/.npm/_logs/2020-10-29T18_12_00_720Z-debug.log
sels-MacBook-Air:webpack_babel_prac sel$ 

它告诉我配置有一个未知属性“query”，如上图所示。当我删除查询并保留预设时：['@babel/preset env']。它将显示配置具有未知属性“预设”。但是，当我删除query和presets对象时，它将运行build，但在我的app.bundle.js中，我的app.js文件中的代码并没有完全编译到ES5中

如果有人能告诉我我做错了什么，我将不胜感激

谢谢。

这些文档展示了一些如何做到这一点的示例。如果您正在遵循指南并看到这一点，那么这些指南一定是几年前编写的

查询

应该是

选项

  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',          
        options:{
          presets: ['@babel/preset-env']
        }
      }
    ]
  }

---

谢谢你，伙计。我将其更改为“选项”，并成功运行。下次我会更加关注指南。有人需要告诉我写js libs的人向后兼容的情况。太令人沮丧了！