webpack-cli 无效的配置对象

Question

我已安装 laravel 5.8，我想在其中使用 vue。我尝试运行以下命令。 我在ubuntu上运行，node版本是10.19。

1. npm install
2. npm run watch

第一个命令运行正常并给出了一些警告。当我run npm run watch 时出现以下错误。 我是新人，因此感谢您提供任何帮助。

    [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[10] has an unknown property 'loaders'. These properties are valid:
   object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development 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!     /home/admin/.npm/_logs/2021-12-07T09_49_10_144Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ watch: `npm run development -- --watch`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm.

我的package.json如下

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
    "axios": "^0.24.0",
    "bootstrap": "^4.1.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^4.1.4",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.44.0",
    "sass-loader": "^7.3.1",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
},
"dependencies": {}

}

Answer 1

使用 npm i -S webpack@latest 安装 "webpack": "^5.41.1" 将解决此问题。