我正在使用laravel 7和Vue Js在一个项目上工作，但是每当我键入npm run watch或npm run dev时，我的程序突然停止编译，但出现以下错误 错误代码
> school@1.0.0 development C:\xampp4\htdocs\school
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:281
throw err;
^
ValidationError: 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 { 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.
at validate (C:\xampp4\htdocs\school\node_modules\webpack\node_modules\schema-utils\dist\validate.js:104:11)
at validateSchema (C:\xampp4\htdocs\school\node_modules\webpack\lib\validateSchema.js:73:2)
at create (C:\xampp4\htdocs\school\node_modules\webpack\lib\webpack.js:102:3)
at webpack (C:\xampp4\htdocs\school\node_modules\webpack\lib\webpack.js:139:31)
at f (C:\xampp4\htdocs\school\node_modules\webpack\lib\index.js:35:15)
at processOptions (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:272:16)
at yargs.parse (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:364:3)
at Object.parse (C:\xampp4\htdocs\school\node_modules\yargs\yargs.js:576:18)
at C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:49:8
at Object.<anonymous> (C:\xampp4\htdocs\school\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at runCli (C:\xampp4\htdocs\school\node_modules\webpack\bin\webpack.js:54:2)
at Object.<anonymous> (C:\xampp4\htdocs\school\node_modules\webpack\bin\webpack.js:140:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:282:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! school@1.0.0 development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the school@1.0.0 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! C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T19_59_42_066Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! school@1.0.0 dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the school@1.0.0 dev 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! C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T19_59_42_176Z-debug.log
C:\xampp4\htdocs\school>install -g n
'install' is not recognized as an internal or external command,
operable program or batch file.
C:\xampp4\htdocs\school>npm install -g n
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n@6.7.0: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS: !win32
npm ERR! notsup Valid Arch: any
npm ERR! notsup Actual OS: win32
npm ERR! notsup Actual Arch: x64
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Emmanuel\AppData\Roaming\npm-cache\_logs\2020-11-05T20_04_55_252Z-debug.log
我的Package.json显示如下：
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --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 --disable-host-check --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 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build": "webpack -p"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.5.3",
"cross-env": "^7.0.2",
"jquery": "^3.5",
"laravel-mix": "^5.0.7",
"lodash": "^4.17.20",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.2",
"sass": "^1.28.0",
"sass-loader": "^10.0.5",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"bootstrap-vue": "^2.18.1",
"copy-webpack-plugin": "^5.1.1",
"node-sass": "^5.0.0",
"vue-router": "^3.4.8",
"vue-router-dom": "^1.0.0-beta.1",
"vuex": "^3.5.1",
"webpack": "^5.4.0"
},
"name": "school",
"description": "<p align=\"center\"><img src=\"https://res.cloudinary.com/dtfbvvkyp/image/upload/v1566331377/laravel-logolockup-cmyk-red.svg\" width=\"400\"></p>",
"version": "1.0.0",
"main": "webpack.mix.js",
"directories": {
"test": "tests"
},
"author": "",
"license": "ISC"
}
我尝试按照此链接中的步骤操作，但没有成功why I can not run npm run dev successfully in Laravel 7?
https://github.com/JeffreyWay/laravel-mix/issues/1072
webpack.js is not found in laravel vue app?。我对webpack不了解，请问已经有好几天了
答案 0 :(得分：1)
不确定您是否已经设法为此找到了解决方案，但我刚遇到它并设法解决了我的问题。
rm -rf node_modules/rm package.lock"webpack": "^5.4.0" 中删除 package.jsonnpm install您可能只用 npm uninstall webpack 就可以逃脱，但之后可能需要再次运行 npm install。
基本上，laravel-mix 在底层使用 webpack 4，因此在它之上安装 webpack 5 会发生冲突并引发与 laravel-mix 中包含的 webpack 配置文件中的已删除/替换指令相关的错误。
由于 NPM ENOENT 错误，我最终手动安装了 webpack，我假设是因为在 Windows 下运行 vagrant/homestead box。切换到纱线而不是 npm 让我可以毫无问题地安装所有东西。如有必要，我可以使用 npm 运行任何命令。
答案 1 :(得分：0)
在您的webpack.config.js文件中，尝试将loaders更改为rules。似乎在Webpack 2中，loaders已替换为rules。
请参见this post