部署Node.js应用到Heroku时出现webpack: not found错误求助

问题概述 #

尝试将Node.js应用通过GitHub部署到Heroku时，构建持续失败，报错webpack: not found。已尝试以下操作但未解决：

• 在package.json中添加Node版本
• webpack已安装并列入client的devDependencies
• 在根目录package.json的scripts中添加heroku-prebuild: npm install --dev

报错分析 #

从构建日志可以看出：

1. Heroku默认以NODE_ENV=production环境执行构建，此时npm会跳过安装devDependencies
2. client目录下的webpack属于devDependencies，因此生产环境安装依赖时并未被安装
3. 执行npm run build时，client的build脚本直接调用webpack，但该命令未被安装到环境中

解决方案 #

1. 正确配置Node版本 #

在根目录package.json中添加engines字段，明确指定Node和npm版本（匹配Heroku安装的版本，日志中显示为node 16.x，npm 8.x）：

{
  // 其他字段...
  "engines": {
    "node": "16.x",
    "npm": "8.x"
  }
}

2. 确保构建时安装client的开发依赖 #

有两种可选方式：

方式一：修改根目录的build脚本

在执行client的build命令前，先安装client的所有依赖（包括devDependencies）：

{
  "scripts": {
    // 其他脚本...
    "build": "cd client && npm install --include=dev && npm run build"
  }
}

方式二：配置heroku-prebuild脚本

在根目录package.json的scripts中添加正确的预构建脚本，确保client的dev依赖被安装：

{
  "scripts": {
    // 其他脚本...
    "heroku-prebuild": "cd client && npm install --include=dev"
  }
}

注意：原脚本中的npm install --dev参数不正确，npm 7+版本需使用--include=dev来强制安装开发依赖

3. （可选）调整client的依赖配置 #

如果上述方法仍无效，可以将client中的webpack和webpack-cli从devDependencies移到dependencies中（不推荐，但可作为临时解决方案）：

{
  "dependencies": {
    // 原有依赖...
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "devDependencies": {
    // 移除上述两个包
    // 其他dev依赖...
  }
}

验证修改 #

完成上述配置后，重新提交代码到GitHub并触发Heroku构建，确认webpack命令能正常执行。

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