如何将使用 Webpack 的节点部署到 heroku

Posted 2023-03-07

【中文标题】如何将使用 Webpack 的节点部署到 heroku

【英文标题】：How to deploy node that uses Webpack to heroku

【发布时间】：2016-07-13 09:27:45

【问题描述】：

我正在使用 webpack。

我也不提交所有生成文件所在的 npm_modules 文件夹和公用文件夹。在部署和设置我的服务器（它已经在寻找公共文件夹）之后，我无法弄清楚如何构建我的应用程序（我有 webpack 构建命令）。

在上传之前提交似乎是个坏主意。也许有一些温和的决定......有什么想法吗？

来自：How to deploy node that uses Gulp to heroku

【参考方案1】：

"heroku-postbuild": "webpack -p --config ./webpack.prod.config.js --progress"

这更好，因为如果您使用 postinstall，每次您执行 npm i 时，构建脚本都会被触发

【讨论】：

我一直在寻找一种方法来避免每次安装依赖项时都使用 webpack 构建应用程序，这是按照 Heroku 文档 (devcenter.heroku.com/articles/…) 执行此操作的正确方法。跨度>

*** 上的所有其他答案都使用postinstall。这是他们所有人的最佳答案。

【参考方案2】：

按照@orlando 的建议，在postinstall 脚本中执行此操作：

"postinstall": "webpack -p --config ./webpack.prod.config.js --progress"

在这种方法中，请确保heroku config:set NODE_ENV=production heroku config:set NPM_CONFIG_PRODUCTION=true

或

你可以找到这个 custom buildpack heroku-buildpack-webpack 可用。

这些链接可能会帮助您加深理解：

heroku hook-things-up npm scripts

【参考方案3】：

在 2019 年，最简单的方法是使用 heroku/nodejs buildpack（如果您在存储库的根目录下有 package.json，则自动选择）并添加 build 脚本来打包 json：

"build": "webpack --mode production --config ./webpack.prod.config.js"

Heroku 将在部署时自动运行此脚本。加分，因为这是运行以在本地或 CI 中测试构建的直观脚本。

这在 Heroku 的 Best Practices for Node.js Development 文档中有所描述：

npm 的生命周期脚本为自动化提供了很好的挂钩。 Heroku 提供了自定义钩子，允许您在我们安装依赖项之前或之后运行自定义命令。如果你需要在构建你的应用程序之前运行一些东西，你可以使用heroku-prebuild 脚本。需要使用 grunt、gulp、browserify 或 webpack 构建资产？在build 脚​​本中执行此操作。