How to deploy node that uses Webpack to heroku

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

this is better because if you use postinstall, everytime you do npm i the build script get fired

In 2019, the simplest way to do this is to use the heroku/nodejs buildpack (automatically selected if you have a package.json at the root of the repository) and add a build script to package json:

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

Heroku will automatically run this script on deploy. Bonus points because this is the intuitive script to run to test the build locally or in CI.

This is described in Heroku's Best Practices for Node.js Development document:

npm’s lifecycle scripts make great hooks for automation. Heroku provides custom hooks that allow you to run custom commands before or after we install your dependencies. If you need to run something before building your app, you can use the heroku-prebuild script. Need to build assets with grunt, gulp, browserify, or webpack? Do it in a build script.

Do it in a postinstall script as suggested by @orlando:

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

In this approach make sure to heroku config:set NODE_ENV=production heroku config:set NPM_CONFIG_PRODUCTION=true

OR

You can find this custom buildpack heroku-buildpack-webpack usable.

These links might help you build understanding:

• heroku hook-things-up
• npm scripts