未找到 Webpack，正在部署到 Heroku

Posted 2023-02-22

【中文标题】未找到 Webpack，正在部署到 Heroku

【英文标题】：Webpack not found, deploying to Heroku

【发布时间】：2017-01-20 07:44:25

【问题描述】：

Node 新手，部署到 Heroku。我设置了一个基本的 React 应用程序，并正在尝试部署到 Heroku。我已经推送了，但是应用程序失败了。当我查看日志时，我看到了一些关于 sh: 1: webpack: not found 的内容（完整日志 here）

我不太确定发生了什么，但相信它与我的 package.json 有关吗？从我使用的入门模板中，它是这样的：

    "name": "express-react-redux-starter",
    "version": "1.0.0",
    "description": "Starter for Express, React, Redux, SCSS applications",
    "scripts": 
      "dev": "webpack-dev-server --config ./webpack/webpack-dev.config.js --watch --colors",
      "build": "rm -rf dist && webpack --config ./webpack/webpack-prod.config.js --colors",
      "start": "PORT=8080 node start ./server.js",
      "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
      "test:watch": "npm run test -- --watch",
      "lint": "eslint src test webpack"
    ,
    "keywords": [
      "ExpressJS",
      "ReactJS",
      "Redux",
      "React hot loader",
      "React Router",
      "SCSS",
      "Webpack Devevelopment configuration",
      "Webpack Production configuration",
      "Airbnb Eslint",
      "pm2",
      "mocha",
      "chai"
    ],
    "repository": 
      "type": "git",
      "url": "git+https://github.com/DimitriMikadze/express-react-redux-starter"
    ,
    "author": "Dimitri Mikadze",
    "license": "MIT",
    "devDependencies": 
      "autoprefixer": "^6.4.0",
      "autoprefixer-loader": "^3.2.0",
      "babel-core": "^6.8.0",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-stage-1": "^6.5.0",
      "chai": "^3.5.0",
      "chai-jquery": "^2.0.0",
      "css-loader": "^0.23.1",
      "eslint": "^2.10.2",
      "eslint-config-airbnb": "^9.0.1",
      "eslint-plugin-import": "^1.8.0",
      "eslint-plugin-jsx-a11y": "^1.2.0",
      "eslint-plugin-react": "^5.1.1",
      "extract-text-webpack-plugin": "^1.0.1",
      "html-webpack-plugin": "^2.16.1",
      "jquery": "^2.2.3",
      "jsdom": "^9.0.0",
      "mocha": "^2.4.5",
      "node-sass": "^3.7.0",
      "react-addons-test-utils": "^15.0.2",
      "react-hot-loader": "^1.3.0",
      "sass-loader": "^3.2.0",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack-dev-server": "^1.14.1"
    ,
    "dependencies": 
      "classnames": "^2.2.5",
      "express": "^4.13.4",
      "lodash": "^4.15.0",
      "react": "^15.0.2",
      "react-dom": "^15.0.2",
      "react-redux": "^4.4.5",
      "react-router": "^2.4.0",
      "redux": "^3.5.2",
      "webpack": "^1.13.0"
    

我做错了什么来部署它？在我的本地主机上工作得很好。但无法弄清楚如何为我的生活把这个带到这个世界上。非常感谢！

【参考方案1】：

我误解了这个问题，所以她对纱线用户：

"heroku-prebuild": "yarn install --production=false"

问题不在于根据文档（至少对于 npm 而言）之后发生的修剪，而是纱线解释 NODE_ENV 并且即使在预构建阶段也只安装生产依赖项。

要强制纱线“监督”环境变量，您必须提供--production=false 标志。见https://yarnpkg.com/lang/en/docs/cli/install/

注意 正如 cmets 在生产中安装开发依赖项中提到的那样，这绝不是一个好主意。这仅对排除部署问题有意义。

【讨论】：

不要这样做。许多开发依赖项成为生产中的漏洞。

【参考方案2】：

这对我有用https://github.com/rails/webpacker/issues/512

heroku buildpacks:add --index 1 heroku/nodejs

【讨论】：

当我将 Rails 4.2.8 更新到 6.1.4 时，这也解决了我的问题

【参考方案3】：

正如其他人所说，Heroku 将在运行指定的 package.json 脚本以启动应用程序之前修剪 devDependencies。

我仍然希望 Heroku 修剪 devDependencies，因为在生产过程中不需要这些包，只有在构建过程中才需要。 Heroku 允许使用 customized build process，我可以利用它来达到预期的效果。

"scripts": 
  "heroku-prebuild": "npm install --dev",
  "build": "webpack --mode production",
  "start": "node src/app.js",

预构建将安装开发依赖项，然后构建脚本将简单地使用这些开发依赖项来生成 webpack 包。之后，将在运行启动脚本之前定期修剪 devDependencies 以用于生产。

【讨论】：

不要这样做。许多开发依赖项成为生产中的漏洞。

【参考方案4】：

此行为于 2018 年 3 月 1 日更改：https://devcenter.heroku.com/changelog-items/1376

它将安装devDependencies，但也会在部署过程中修剪它们。可以通过heroku config:set NPM_CONFIG_PRODUCTION=false 跳过修剪。这仍然将NODE_ENV 设置为production。

【参考方案5】：

正如其他人所说，Heroku 将 node 作为生产运行NODE_ENV=production，这意味着您的 devDependencies 不会被安装。 Heroku 提供了节点特定的构建钩子。我使用heroku-prebuild 运行npm install --dev，它会安装所有依赖项和devDependencies。

"scripts": 
  ...,
  "heroku-prebuild": "npm install --dev",
  ...
,

应该避免在非生产模式下运行您的应用程序。开发人员通常具有“开发模式”特定代码，这些代码在生产中运行时会被过滤掉。另外，如果你正在做一个 webpack 构建的事情，你肯定希望处于生产模式以利用缩小、丑化等。

这是 Heroku 的详细信息。

有时，开发人员需要一些更面向生产的东西，而不是 package.json 中的 preinstall 和 postinstall 钩子。例如，一些 应用程序需要在安装前设置额外的身份验证 依赖项。有些需要构建资产，但不是在开发中 环境。更多的例子可以在讨论中找到 GitHub。

Node.js 开发人员现在可以使用 heroku-prebuild 和 heroku-postbuild 钩子来为他们的应用定制构建过程。

https://devcenter.heroku.com/changelog-items/844

【讨论】：

是的@thisismydesign，它在package.json的“脚本”部分中

虽然它仍然没有多大意义。你不想在生产中依赖开发，你只想运行 webpack。

【参考方案6】：

没有安装devDependencies 是什么原因。您可以通过在项目的根目录中键入以下命令来克服这个问题：

heroku config:set NPM_CONFIG_PRODUCTION=false

那么，下次部署应用时，您的问题应该会得到解决。

【讨论】：

虽然这会安装 devDependencies，但在生产环境中部署应用程序可能会导致其他问题。真正需要发生的是您需要告诉 heroku 安装 devDependencies，这可以使用您的 package.json 文件中的 heroku-prebuild 脚本来完成（请参阅我的答案）。

【参考方案7】：

出现这种情况是因为 heroku 默认不安装 package.json 的 dev 依赖，我们需要专门告诉 heroku (npm) 安装我们的 dev 依赖（webpack 在 dev 中），所以运行这个命令应该可以解决 “未找到问题”

.

npm install --dev

【讨论】：

这是一个更好的解决方案。

【参考方案8】：

好的——这与 package.json 中的 devDependencies 与 Dependencies 有关 此外，通过将 Heroku 配置设置为 NPM_CONFIG_PRODUCTION: false 我能够解决这个问题。感谢互联网！

【讨论】：

NPM_CONFIG_PRODUCTION: false，你为什么要这样做？默认情况下，heroku 将安装依赖项而不是 devDependencies。此外，webpack 开发服务器也不适合生产。

heroku config:set NPM_CONFIG_PRODUCTION=false 是这个建议的语法。

花费 2.5 小时检查和仔细检查，直到意识到 webpack 是 devDependencies 所以在推送到 slug 之后它被修剪并且没有构建任何东西。非常感谢。

Heroku 的文档指出“默认情况下，Heroku 将安装 package.json 中列出的所有依赖项，位于 dependencies 和 devDependencies 下。” (devcenter.heroku.com/articles/…) 这是过时的还是完全错误的？

@DanielM 根据我的测试，该文档似乎适用于主文件夹。假设在根目录下有服务器代码，带有 express 和 babel。在部署中，所有的 dep 都已安装并且服务器编译成功。当您切换文件夹以进行另一个安装 + 构建时会出现问题（例如 `cd client && npm install && npm run build）。这是安装违反文档并仅安装生产部门的情况。添加 --dev 标志确实为我解决了这个问题；查看我的 repo here 以获取实际示例。