我遵循了设置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$
它告诉我配置文件中有一个未知的属性"query",如上所示。当我删除"query"并保留"presets: ['@babel/preset-env']"时,它将显示配置文件中有一个未知的属性"preset"。然而,当我删除"query"和"presets"对象后,它会运行构建,但是在我的app.bundle.js中,来自app.js文件的代码没有完全编译成ES5。
如果有人能告诉我我做错了什么,我将不胜感激。
谢谢。