使用Heroku部署应用时出现webpack not found错误求助

在Heroku部署应用时，执行webpack构建步骤出现错误：

sh: 1: webpack: not found

尝试直接运行node node_modules/webpack/bin/webpack.js也无法解决问题，以下是针对该问题的可行修复思路：

问题相关文件及错误信息 #

package.json内容 #

{"name": "waste-not-client","version": "1.0.0","description": "","private": true,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "concurrently npm:watch:*","build": "webpack --mode production","watch:compile": "webpack --mode development --watch","watch:serve": "nodemon server/server.js","heroku-postbuild": "npm install && npm run build && node server/server.js"},"repository": {"type": "git","url": "git+https://github.com/Blue-ocean-HR/blueocean-client.git"},"keywords": [],"author": "","license": "ISC","bugs": {"url": "https://github.com/Blue-ocean-HR/blueocean-client/issues"},"homepage": "/","dependencies": {"@auth0/auth0-react": "^1.12.0","axios": "^1.1.3","compression": "^1.7.4","concurrently": "^7.6.0","cors": "^2.8.5","dotenv": "^16.0.3","express": "^4.18.2","framer-motion": "^7.6.7","nodemon": "^2.0.20","path": "^0.12.7","react": "^18.2.0","react-autocomplete-input": "^1.0.19","react-dom": "^18.2.0","react-router-dom": "^6.4.3","webpack-bundle-analyzer": "^4.7.0"},"devDependencies": {"@babel/core": "^7.12.3","@babel/plugin-syntax-jsx": "^7.18.6","@babel/preset-env": "^7.12.1","@babel/preset-react": "^7.12.5","autoprefixer": "^10.4.13","babel-jest": "^29.1.2","babel-loader": "^8.2.1","compression-webpack-plugin": "^10.0.0","css-loader": "^6.7.1","dotenv-webpack": "^8.0.1","postcss": "^8.4.19","postcss-loader": "^7.0.1","postcss-preset-env": "^7.8.3","style-loader": "^3.3.1","tailwindcss": "^3.2.4","webpack": "^5.75.0","webpack-cli": "^4.10.0","webpack-dev-server": "^4.11.1"},"engines": {"node": "v16.16.0"}}

部署错误信息 #

sh: 1: webpack: not found

修复思路 #

• 调整依赖安装策略：Heroku默认生产环境会跳过devDependencies，而你的webpack和webpack-cli都在devDependencies中，导致构建时找不到命令。可选择以下方案：

  1. 将webpack和webpack-cli移到dependencies中；
  2. 修改heroku-postbuild脚本，先安装所有依赖（包括dev）再构建，最后清理dev依赖：

     "heroku-postbuild": "npm install --include=dev && npm run build && npm prune --production && node server/server.js"
     

  3. 在Heroku设置环境变量NPM_CONFIG_PRODUCTION=false，强制安装所有依赖（不推荐长期使用，会增加应用体积）。

• 用npx调用webpack：修改build脚本，通过npx直接调用本地node_modules中的webpack，避免全局命令找不到的问题：

  "build": "npx webpack --mode production"
  

• 清理Heroku缓存：可能存在依赖缓存问题，执行命令清空缓存后重新部署：

  heroku repo:purge_cache -a 你的应用名称
  

• 确认依赖完整性：本地删除package-lock.json和node_modules，重新执行npm install后再推送代码到Heroku，确保依赖安装完整。

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