React应用部署Heroku失败：构建成功但内容无法显示

咱们来拆解下这个问题：Heroku构建看起来成功，但运行时找不到webpack-dev-server，这大概率是因为这个包只在你的devDependencies里，而Heroku默认在生产环境部署时不会安装开发依赖，同时你的启动命令可能还在调用它——但其实webpack-dev-server是给开发环境用的热重载服务器，生产环境应该用静态文件服务器托管打包后的文件。

下面是具体的解决步骤：

1. 检查package.json的核心配置 #

先看你的scripts启动命令，如果是类似这样的：

"scripts": {
  "start": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
}

问题就出在start命令用了webpack-dev-server，这在生产环境完全不适用。另外确认webpack-dev-server确实在devDependencies中（这本身没问题，但生产环境不会加载它）。

2. 调整package.json适配生产环境 #

• 首先安装生产环境用的静态文件服务器serve：

  npm install serve --save
  

• 修改scripts部分，把生产启动命令换成serve，同时保留开发环境的命令：

  "scripts": {
    "start": "serve -s build",
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }
  

  这里-s build指定从build目录提供静态文件，要确保你的Webpack打包输出目录就是build。

3. 确认Webpack配置的输出路径 #

打开你的webpack.config.js，确保output配置的路径是build目录：

const path = require('path');

module.exports = {
  // ...其他配置项
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

这样npm run build会把打包后的文件放到build目录，serve才能正确读取并托管它们。

4. 确保Heroku能完成构建（可选） #

如果webpack、webpack-cli这类构建工具也在devDependencies里，Heroku默认生产环境不会安装，导致build命令执行失败。这时候可以：

• 方法一：设置Heroku环境变量，让它安装所有依赖：

  heroku config:set NPM_CONFIG_PRODUCTION=false
  

• 方法二：在package.json里添加heroku-postbuild脚本，明确构建步骤：

  "scripts": {
    // ...已有的脚本
    "heroku-postbuild": "npm run build"
  }
  

5. 重新部署 #

修改完所有配置后，提交代码并重新部署到Heroku：

git add .
git commit -m "Fix Heroku deployment: replace webpack-dev-server with serve for production"
git push heroku main

这样应该就能解决webpack-dev-server: not found的问题，让你的React应用在Heroku上正常运行了。

内容的提问来源于stack exchange，提问作者Reena Verma