运行Pluralsight教程项目执行npm start时报错Unable to load @webpack-cli/serve

• 核心原因：@webpack-cli/serve与webpack-cli版本不兼容，高版本的@webpack-cli/serve向webpack-cli传入的命令参数格式发生变更，低版本webpack-cli仍按旧逻辑将参数当作数组调用forEach方法遍历，因此抛出类型错误。
• 其他可能触发的场景：
  • 项目依赖安装不完整，node_modules目录下存在缺失或损坏的依赖文件
  • 全局安装的webpack/webpack-cli版本与项目本地安装的版本产生冲突
  • 旧版webpack-dev-server与新版webpack-cli的调用逻辑不匹配

• 第一步：清理旧依赖与缓存
  先关闭所有运行中的npm进程，执行以下命令清理无效文件：

  # Mac/Linux执行
  rm -rf node_modules package-lock.json yarn.lock
  npm cache clean --force
  
  # Windows执行：手动删除node_modules文件夹、package-lock.json文件后，再运行以下命令
  npm cache clean --force
  

• 第二步：安装兼容的依赖组合
  执行以下命令安装经过验证的适配版本：

  npm install webpack@5.x webpack-cli@4.10.x webpack-dev-server@4.x @webpack-cli/serve@1.7.x --save-dev
  

• 第三步：可选适配（第二步执行后仍报错时操作）
  打开项目根目录的package.json文件，找到scripts字段下的start配置，将原有webpack serve开头的命令替换为：

  "start": "webpack-dev-server --config webpack.config.dev.js --port 3000"
  

• 第四步：启动项目
  执行npm start即可正常运行项目。

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