如何將使用 Webpack 的節點部署到 heroku

Question

我正在使用 webpack。

此外，我不提交所有生成的文件所在的 npm_modules 文件夾和公共文件夾。 在部署和設置我的服務器（它已經在尋找公共文件夾）之后，我無法弄清楚如何構建我的應用程序（我有 webpack build 命令）。

在上傳之前提交似乎是個壞主意。 也許有一些溫和的決定......有什么想法嗎？

派生自： 如何將使用 Gulp 的節點部署到 heroku

Answer 1

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

這更好，因為如果您使用 postinstall，每次執行npm i ，構建腳本都會被觸發

Answer 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

或

您可以找到這個自定義 buildpack heroku-buildpack-webpack可用。

這些鏈接可能會幫助您建立理解：

• heroku 掛鈎事情
• npm 腳本

Answer 3

在 2019 年，最簡單的方法是使用heroku/nodejs （如果您在存儲庫的根目錄下有package.json則自動選擇）並添加build腳本到 package json：

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

Heroku 將在部署時自動運行此腳本。 加分項是因為這是運行以在本地或 CI 中測試構建的直觀腳本。

Heroku 的Node.js 開發最佳實踐文檔中對此進行了描述：

npm 的生命周期腳本為自動化提供了很好的掛鈎。 Heroku 提供自定義鈎子，允許您在我們安裝依賴項之前或之后運行自定義命令。 如果您需要在構建應用程序之前運行某些內容，您可以使用heroku-prebuild腳本。 需要使用 grunt、gulp、browserify 或 webpack 構建資產嗎？ 在build腳本中執行此操作。