javascript - Webpack:未知属性“查询”?
问题描述
我正在练习使用 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"
}
}
我需要做什么来修复这个错误?
解决方案
query
有效的 webpack 配置文件中没有键,更改此部分:
use: {
loader: 'babel-loader',
query: {
presets: ['@babel/env', '@babel/react']
}
},
至:
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/react']
}
}
此外,如果您.babelrc
的根目录中有一个文件,您可以将配置的这些部分添加到该文件中。babel 会自动拾取它。在这里阅读更多
推荐阅读
- jquery - 与 Datatable 功能交互后,表格正在清空
- typescript - 如何理解 TS 代码解析的结果?
- android - 使用 Android 加速度传感器进行距离测量
- angular - Angular 5 将组件动态插入到现有标记中?
- nginx - Nginx 内部调用另一个请求并返回该请求数据
- html - 尝试使用内部 div 制作内联 div
- python - 将字节从 Twitter 抓取转换为字符串
- python - 替换数字,如果它们是一定的价值
- vb.net - 我应该如何将颜色放在 DataGridview 中的特定结果中。如果工作状态为绿色 如果不工作颜色为红色
- regex - 理解 Vim 的正则表达式引擎的问题