javascript - Webpack:未知属性 "query"？

Question

我正在练习使用 React 构建一个按钮，该按钮在单击时将计数器增加 1。我需要使用 Webpack 打包所有内容，以便可以在浏览器中运行它。我运行以下命令:webpack --watch --mode=development并得到以下错误:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[0].use has an unknown property 'query'. These properties are valid:
   object { ident?, loader?, options? }
 

这是我的 webpack.config.js

const path = require('path');

module.exports = {
  entry: './entry.jsx',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
  rules: [
    {
      test: /\.jsx?$/,
      use: {
        loader: 'babel-loader',
        query: {
          presets: ['@babel/env', '@babel/react']
        }
      },
    }
  ]
},

  
  
  devtool: 'source-map',
  resolve: {
    extensions: [".js", ".jsx", "*"]
  }
};

这是 package.json

{
  "name": "click-counter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "webpack",
    "webpack": "webpack --watch --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}

我需要做什么来修复这个错误？

Answer 1

没有query键入有效的 webpack 配置文件，更改这部分:

use: {
  loader: 'babel-loader',
  query: {
    presets: ['@babel/env', '@babel/react']
  }
},

至:

use: {
  loader: 'babel-loader',
  options: {
    presets: ['@babel/env', '@babel/react']
  }
}

如果您有 .babelrc根目录中的文件，您可以将配置的这些部分添加到该文件中。 babel 会自动拾取它。阅读更多 here