设置 Webpack 和 Babel 的问题

Question

我已按照设置 webpack 和 babel 的所有说明进行操作。我使用 npm install --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']
           }
          }
        ]
      }
    }

当我运行构建（npm run 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$ 

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

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

谢谢。

Answer 1

babel-loader 文档显示了几个如何执行此操作的示例。如果您正在关注指南并看到此内容，那么它们一定是几年前编写的指南。

query 应该是options。

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