搭建ES6开发环境后执行npm run build无法启动webpack-dev-server报错求助

• webpack V4及以上版本将CLI工具拆分到了独立的webpack-cli包中，未安装该包无法正常执行webpack相关命令
• 已安装的webpack-dev-server与webpack、webpack-cli版本不兼容：旧版webpack-dev-server依赖的webpack-cli/bin/config-yargs路径，在新版webpack-cli中已被移除，因此触发模块找不到的报错

1. 先卸载现有不兼容的依赖包
   执行如下命令卸载项目本地安装的相关包：

npm uninstall webpack webpack-cli webpack-dev-server -D

如果之前曾经全局安装过这三个包，需要同时卸载全局版本：

npm uninstall webpack webpack-cli webpack-dev-server -g

2. 安装版本匹配的依赖组合
   可选择任意一组兼容的版本安装即可：

• webpack 4.x 兼容组合：

npm i webpack@4.x webpack-cli@3.x webpack-dev-server@3.x -D

• webpack 5.x 兼容组合：

npm i webpack@5.x webpack-cli@4.x webpack-dev-server@4.x -D

如果使用yarn作为包管理器，将上述命令中的npm i替换为yarn add -D即可。
3. 修正package.json的scripts配置
注意命令用途不要混淆：

• 启动本地开发服务对应命令为webpack-dev-server，建议配置到dev脚本下："dev": "webpack-dev-server --open --mode development"
• 生产环境打包对应命令为webpack，配置到build脚本下："build": "webpack --mode production"

4. 执行命令测试
   配置完成后执行npm run dev即可启动本地开发服务，执行npm run build即可完成代码打包。

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