Heroku部署JATE文本编辑器报错：webpack: not found求助
2026-7-27
部署JATE到Heroku时出现
webpack: not found错误的排查与解决 问题概述
本地运行正常的JATE简易文本编辑器，部署到Heroku时触发构建错误：sh: 1: webpack: not found，推测问题与client端的依赖配置相关。
项目配置文件
根目录package.json
{ "name": "JATE", "version": "1.0.0", "description": "", "main": "server.js", "engines": { "node": "18.x" }, "scripts": { "start:dev": "concurrently \"cd client && npm run build\" \"cd server && npm run server\" ", "start": "npm run build && cd server && node server.js", "server": "cd server node server.js --ignore client", "build": "cd client && npm run build", "install": "cd server && npm i && cd ../client && npm i", "client": "cd client && npm start", "heroku-prebuild": "npm install --dev" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1", "if-env": "^1.0.4" }, "devDependencies": { "concurrently": "^5.2.0", "nodemon": "^2.0.4" } }
client/package.json
{ "name": "JATE", "scripts": { "dev": "webpack-dev-server", "build": "webpack --mode production", "start": "webpack --watch" }, "author": "2U", "license": "UNLICENSED", "devDependencies": { "@babel/core": "^7.15.0", "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.15.0", "@babel/runtime": "^7.15.3", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "http-server": "^0.11.1", "style-loader": "^3.2.1", "webpack": "^5.51.1", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.0.0", "webpack-pwa-manifest": "^4.3.0", "workbox-webpack-plugin": "^6.2.4" }, "dependencies": { "code-mirror-themes": "^1.0.0", "idb": "^6.1.2" } }
server/package.json
{ "name": "JATE", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "server": "nodemon server.js --ignore client" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1" }, "devDependencies": { "nodemon": "^2.0.4" } }
Heroku部署日志
remote: Building source: remote: remote: -----> Building on the Heroku-22 stack remote: -----> Using buildpack: heroku/nodejs remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: USE_NPM_INSTALL=true remote: NODE_VERBOSE=false remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: remote: -----> Installing binaries remote: engines.node (package.json): 18.x remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 18.x... remote: Downloading and installing node 18.15.0... remote: Using default npm version: 9.5.0 remote: remote: -----> Prebuild remote: Running heroku-prebuild remote: remote: > JATE@1.0.0 heroku-prebuild remote: > npm install --dev remote: remote: remote: > JATE@1.0.0 install remote: > cd server && npm i && cd ../client && npm i remote: remote: remote: added 57 packages, and audited 58 packages in 440ms remote: remote: 7 packages are looking for funding remote: run `npm fund` for details remote: remote: found 0 vulnerabilities remote: remote: added 2 packages, and audited 3 packages in 1s remote: remote: found 0 vulnerabilities remote: remote: added 162 packages, and audited 163 packages in 13s remote: remote: 16 packages are looking for funding remote: run `npm fund` for details remote: remote: found 0 vulnerabilities remote: npm notice remote: npm notice New minor version of npm available! 9.5.0 -> 9.6.2 remote: npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.6.2> remote: npm notice Run `npm install -g npm@9.6.2` to update! remote: npm notice remote: remote: -----> Installing dependencies remote: Installing node modules (package.json + package-lock) remote: remote: > JATE@1.0.0 install remote: > cd server && npm i && cd ../client && npm i remote: remote: remote: up to date, audited 58 packages in 372ms remote: remote: 7 packages are looking for funding remote: run `npm fund` for details remote: remote: found 0 vulnerabilities remote: remote: up to date, audited 3 packages in 1s remote: remote: found 0 vulnerabilities remote: remote: up to date, audited 163 packages in 3s remote: remote: 16 packages are looking for funding remote: run `npm fund` for details remote: remote: found 0 vulnerabilities remote: remote: -----> Build remote: Running build remote: remote: > JATE@1.0.0 build remote: > cd client && npm run build remote: remote: remote: > build remote: > webpack --mode production remote: remote: sh: 1: webpack: not found remote: remote: -----> Build failed remote: remote: We're sorry this build is failing! You can troubleshoot common issues here: remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys remote: remote: If you're stuck, please submit a ticket so we can help: remote: https://help.heroku.com/ remote: remote: Love, remote: Heroku remote: remote: ! Push rejected, failed to compile Node.js app. remote: remote: ! Push failed remote: Verifying deploy... remote: remote: ! Push rejected to murmuring-headland-78036. remote: To https://git.heroku.com/murmuring-headland-78036.git [remote rejected] main -> main (pre-receive hook declined) error: failed to push some refs to 'https://git.heroku.com/murmuring-headland-78036.git'
已尝试的解决方案
- 安装heroku buildpack/nodejs
- 设置
heroku config use_npm_install=true - 分别通过CLI和GitHub部署到Heroku
问题根源与解决办法
问题根源
Heroku默认在NODE_ENV=production环境下不会安装devDependencies，而client端构建依赖的webpack、webpack-cli等工具都放在了client/package.json的devDependencies中，导致构建时找不到这些命令。
解决办法
方案1：将构建依赖移到dependencies（推荐）
修改client/package.json，把构建所需的包从devDependencies移到dependencies中：
{ // ...其他配置 "dependencies": { "code-mirror-themes": "^1.0.0", "idb": "^6.1.2", "webpack": "^5.51.1", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.0.0" }, "devDependencies": { "@babel/core": "^7.15.0", "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.15.0", "@babel/runtime": "^7.15.3", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "http-server": "^0.11.1", "style-loader": "^3.2.1", "webpack-pwa-manifest": "^4.3.0", "workbox-webpack-plugin": "^6.2.4" } }
这样Heroku生产环境会安装这些构建依赖，确保build脚本能正常运行。
方案2：使用npx调用webpack
修改client/package.json的build脚本，用npx直接调用本地node_modules中的webpack：
"scripts": { "dev": "webpack-dev-server", "build": "npx webpack --mode production", "start": "webpack --watch" }
npx会自动在项目的node_modules目录中查找webpack命令，无需全局安装或调整依赖位置。
方案3：强制Heroku安装dev依赖（不推荐）
通过Heroku CLI设置环境变量，让Heroku在生产环境下安装所有dev依赖：
heroku config:set NPM_CONFIG_PRODUCTION=false
此方法会增加部署包体积，仅适合临时测试，不建议长期使用。
内容的提问来源于stack exchange，提问作者Tweakiel
相关产品推荐
相关产品推荐
