[webpack-cli] Unable to load '@webpack-cli/serve' command

npm run dev 報錯總結

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (E:\vue\webopj\node_modules\webpack-cli\lib\webpack-cli.js:173:21)
    at ServeCommand.apply (E:\vue\webopj\node_modules\@webpack-cli\serve\lib\index.js:42:19)
    at loadCommandByName (E:\vue\webopj\node_modules\webpack-cli\lib\webpack-cli.js:907:35)
    at async Command.<anonymous> (E:\vue\webopj\node_modules\webpack-cli\lib\webpack-cli.js:1462:17)
    at async Promise.all (index 0)
    at async WebpackCLI.run (E:\vue\webopj\node_modules\webpack-cli\lib\webpack-cli.js:1500:9)
    at async runCLI (E:\vue\webopj\node_modules\webpack-cli\lib\bootstrap.js:11:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webopj@1.0.0 dev: `webpack serve`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webopj@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\thinkpad\AppData\Roaming\npm-cache\_logs\2022-02-10T06_29_22_956Z-debug.log

解決方法：
    方法 1.npm install -D webpack-cli@4.7.2 
        //這步告訴npm 我安裝了webpack-cli了並記錄在webpack.config
       //當執行npm run dev 時會讀取webpack
    方法 2.  webpack-cli版本問題，指定的版本與環境沖突
             npm install -g cnpm --registry=https://registry.npmmirror.com
        //安裝淘寶的鏡像
             npm uninstall webpack-cli
             npm install  webpack-cli
     注意：-g全局安裝，不會將安裝版本告訴npm即使加了-D ，所有執行npm run dev 不會檢測到wepack-cli已經安裝

[webpack-cli] TypeError: Cannot read property 'tap' of undefined

原因：webpack的版本號跟html-webpack-plugin的版本號不匹配，不兼容

當前版本：

webpack 4.46.0
webpack-cli 4.3.1

html-webpack-plugin@5.3.2

解決：降低版本

npm install -D html-webpack-plugin@4.5.0

原文鏈接：https://blog.51cto.com/u_15127538/4283348