执行npm start报错Cannot find module 'webpack-cli/bin/config-yargs'求助

问题根因 #

你当前使用的webpack-cli@4.x和webpack-dev-server@3.x存在版本兼容性问题：webpack-cli 4.0之后重构了内部文件结构，移除了webpack-cli/bin/config-yargs文件，而webpack-dev-server 3.x版本运行时依赖该文件，因此启动时报MODULE_NOT_FOUND错误。

解决方案 #

有两种可行的修复方案，任选其一即可：

方案1（推荐）：升级webpack-dev-server到4.x版本 #

适配webpack 5和webpack-cli 4.x的官方生态，操作步骤如下：

• 卸载旧版本webpack-dev-server

npm uninstall webpack-dev-server@3.11.2

• 安装4.x版本的webpack-dev-server

npm install webpack-dev-server@4.x -D

• 修改package.json中的启动脚本配置：

"scripts": {
  "start": "webpack serve"
}

方案2：降级webpack-cli到3.x版本 #

如果不需要保留新版webpack-cli的特性，可以降级webpack-cli适配现有dev-server版本，操作步骤如下：

• 卸载当前版本webpack-cli

npm uninstall webpack-cli@4.7.0

• 安装3.x版本的webpack-cli

npm install webpack-cli@3.x -D

• 原有"start": "webpack-dev-server"启动脚本无需修改。

验证修复 #

配置修改完成后，删除项目根目录下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖，再运行npm start即可正常启动项目。

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