使用webpack构建的React应用部署Heroku提示找不到webpack依赖，本地运行正常

问题根本原因 #

• Heroku 默认在生产环境下只会安装 dependencies 下的依赖包，你把 webpack、webpack-cli、react 等运行/构建必需的依赖都放在了 devDependencies 里，导致生产环境找不到 webpack 命令
• 你当前的 start 脚本用的是开发环境的 webpack devServer，生产环境不应该跑开发服务，应该直接托管构建好的静态资源

具体修复步骤 #

1. 调整依赖位置
   把 devDependencies 里生产构建、运行必需的依赖移动到 dependencies 里，包括：react、react-dom、antd、axios、lodash、dotenv、webpack、webpack-cli、html-webpack-plugin、babel-loader、@babel/core、@babel/preset-env、@babel/preset-react、css-loader、style-loader、file-loader、svg-url-loader。
   仅开发阶段需要的依赖（比如 webpack-dev-server、react-hot-loader、gh-pages 等）可以留在 devDependencies 中。

2. 修改启动和构建脚本
   先把静态资源托管工具 serve 加入 dependencies，再修改 package.json 中的 scripts 配置：

"scripts": {
  "start": "serve -s build -l $PORT",
  "build": "webpack --mode production",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

说明：$PORT 是 Heroku 自动分配的端口变量，不要手动写死端口号。

3. 删除冗余配置
   删掉你之前添加的 heroku-prebuild 脚本，生产环境不需要额外安装开发依赖，反而会拖慢构建速度。

4. 重新部署验证
   修改完配置后提交代码，重新推送到 Heroku 即可正常部署。

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