启动webpack-dev-server报错找不到webpack-cli/bin/config-yargs模块求助

这个问题本质不是组件版本过旧，是三个组件的版本搭配逻辑错位：
webpack-dev-server@3.11.2 是为webpack-cli 3.x版本开发的，它的启动脚本内部硬依赖webpack-cli 3.x路径下的bin/config-yargs模块；但你当前安装的webpack-cli@4.5.0 重构了全部模块入口路径，彻底移除了这个旧的文件，所以启动时会直接抛出模块找不到的错误，和版本新不新没有关系。

两个方案选其一即可，不需要全部操作：

方案1：最小改动，适配现有webpack-dev-server版本 #

如果不想改动已经跑通的构建逻辑，就通过调整webpack-cli的版本匹配现有dev-server：

• 卸载当前不兼容的webpack-cli 4.5.0：
  npm uninstall webpack-cli
• 安装webpack-cli 3.x最终稳定版（3.3.12，和webpack-dev-server 3.11.2官方完全兼容）：
  npm install webpack-cli@3.3.12 --save-dev
• 重新执行原启动命令即可正常运行：
  npx webpack-dev-server --compress --history-api-fallback --progress --host 0.0.0.0 --port 3005
  如果是通过npm run watch启动，不需要修改package.json的脚本内容，原命令可以直接正常运行。

方案2：保留现有webpack-cli版本，升级dev-server适配 #

如果不想降级webpack-cli，就升级webpack-dev-server到和webpack-cli 4.x适配的4.x系列：

• 卸载旧的webpack-dev-server 3.11.2：
  npm uninstall webpack-dev-server
• 安装兼容webpack5 + webpack-cli4的dev-server稳定版（4.15.1）：
  npm install webpack-dev-server@4.15.1 --save-dev
• 调整启动命令：webpack-dev-server 4.x不再支持直接调用可执行文件启动，统一采用webpack-cli的子命令模式，把原启动命令里的webpack-dev-server替换成webpack serve即可：
  npx webpack serve --compress --history-api-fallback --progress --host 0.0.0.0 --port 3005
  如果是通过npm run watch启动项目，记得把package.json里的watch脚本内的对应命令同步替换即可，不需要修改其他依赖配置。
  注意：dev-server 4.x对部分CLI参数的兼容逻辑有调整，如果启动时报参数不识别，只需要把对应参数移到webpack.config.js的devServer配置项里即可，不需要改动核心构建逻辑

• 操作完成后可以执行npx npm ls webpack webpack-cli webpack-dev-server 检查实际安装的版本是否和预期一致，避免package-lock.json缓存导致的版本错位
• 如果还是报模块找不到，就删除node_modules文件夹和package-lock.json文件后重新执行npm install，清除旧的依赖缓存

内容的提问来源于stack exchange，提问作者rdrgtec