解决Webpack插件报 Unable to load ‘@webpack-cli/serve‘ command 异常

webpack-dev-server 插件安装

npm install webpack-dev-server@3.11.2 -D

在安装 webpack-dev-server 插件后，再次运行 npm run dev 命令，重新进行项目的打包时报下面异常：

PS D:\web\vue\code\change-rows-color> npm run dev

> change-rows-color@1.0.0 dev D:\web\vue\code\change-rows-color
> webpack serve

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (D:\web\vue\code\change-rows-color\node_modules\webpack-cli\lib\webpack-cli.js:173:21)
    at ServeCommand.apply (D:\web\vue\code\change-rows-color\node_modules\@webpack-cli\serve\lib\index.js:41:19)
    at loadCommandByName (D:\web\vue\code\change-rows-color\node_modules\webpack-cli\lib\webpack-cli.js:907:35)    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! change-rows-color@1.0.0 dev: `webpack serve`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the change-rows-color@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!     D:\install\node\node_cache\_logs\2022-11-24T02_10_35_977Z-debug.log

解决步骤

1.无法加载“@webpack cli/service”命令,未下载@webpack cli/service，则下载webpack cli （ i是 install的简写,-D与 --save-dev的简写，安装包写入 devDependencies(开发环境中)）

npm i --save-dev webpack-cli 

2.查询webpack版本

PS D:\web\vue\code\change-rows-color> npx webpack --version
webpack: 5.42.1
webpack-cli: 4.10.0      
webpack-dev-server 3.11.2
PS D:\web\vue\code\change-rows-color>