【完美解决】webpack 升级问题 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

我用vue init webpack myvue 新建了一个vue项目，npm run dev能正常启动，
然后我又跟着B站老师安装了webpack和webpack-cli，后来再运行这个项目的时候就报错了：
internal/modules/cjs/loader.js:892
throw err;
^

Error: Cannot find module ‘webpack-cli/bin/config-yargs’
Require stack:

• /Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
  at Function.Module._load (internal/modules/cjs/loader.js:745:27)
  at Module.require (internal/modules/cjs/loader.js:961:19)
  at require (internal/modules/cjs/helpers.js:92:18)
  at Object. (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
  at Module._compile (internal/modules/cjs/loader.js:1072:14)
  at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)
  at Module.load (internal/modules/cjs/loader.js:937:32)
  at Function.Module._load (internal/modules/cjs/loader.js:778:12)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
  code: ‘MODULE_NOT_FOUND’,
  requireStack: [
  ‘/Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js’
  ]
  }

package.json配置如下（也是npm安装webpack后的版本，在项目目录下安装完成后会自动更新package.json中的配置）
··
webpack 5.47.1
webpack-cli 4.7.2
webpack-dev-server 3.11.2
··
网上的方法试过很多，都不行，比如修改start，将webpack-cli降级，运行都是各种报错，降级后还出现其他问题，又是一通百度，报错如下：
/Users/xxx/Documents/Vue/myvue/build/webpack.dev.conf.js:52
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
^

TypeError: webpack.NamedModulesPlugin is not a constructor
at Object. (/Users/xxx/Documents/Vue/myvue/build/webpack.dev.conf.js:52:5)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at WEBPACK_OPTIONS (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at /Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach ()
at module.exports (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at Object. (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
找来找去都没啥用，反而把系统配置参数弄的乱七八糟。

解决方法

既然当时用vue 创建的项目能够正常运行，那我为什么不还原回去呢？那我就先npm uninstall webpack,npm uninstall webpack-cli.

然后再把package,json文件还原，在项目目录下运行npm install，最后nom run dev，完美解决！

前端一大堆的这种版本问题，让一个后端怎么进步呢？前端的朋友要加油，尽快把这种问题解决，谢谢了！

写在最后：
上面的项目在使用vue init webpack hello-vue创建的项目时不管用，作为一种方式供大家参考。
另外一种方法：
我是在B站跟着狂神学的Vue，他那时候用的Vue2.X，我系统里Vue 版本是2.9.6，但是用npm安装webpack,webpack-cli就会直接安装最新的5.X，不管我怎么指定版本安装，npm audit fix一下就又是最新的。并且老师用的创建项目的命令是：vue init webpack hello-vue，这是V2.X版本使用的方法。

Vue是2.X版本，nodejs版本是V14.X，但是webpack又是最新版本，我觉得是不是两者版本不兼容，所以我就卸载了本地低版本的Vue，下载了最新版本的Vue：$ npm install -g @vue/cli。然后再使用vue-cli3.X创建项目：vue create hello-world，运行npm run serve 成功！