Skip to content

Setup a Webpack Production Configuration

Video Lecture

Setup a Webpack Production Configuration

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

We have been using the Webpack-Dev-Server during each lesson so far.

The Webpack-Dev-Server is dynamically generating a bundle.js at runtime for us that is also running in HMR mode.

This bundle.js is generated fast and we can preview it right away in the browser, but it is very large in comparison to a production specific version of bundle.js.

We will use Webpack to generate the production specific version of bundle.js

The production build won't include the extra code used by the HMR option since we won't be developing directly in our production environment.

Now, while the production version of bundle.js is much smaller, it does take quite a lot longer to generate, so it is not as beneficial to use in development since you will need to wait some extra time between each change before you can preview it.

The production version of bundle.js will also be saved as a new file directly to the file system, so then we can copy it manually later to our own production web servers.

./src/client/webpack.prod.js

Copy this webpack production config to ./src/client/webpack.prod.js

1
2
3
4
5
6
7
8
9
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production',
  performance: {
    hints: false,
  },
})

After copying this above file, open ./package.json and then add the highlighted line below to the scripts node.

{
...
  "scripts": {
    "build": "webpack --config ./src/client/webpack.prod.js",
    "dev": "webpack serve --config ./src/client/webpack.dev.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Now open a terminal and enter

npm run build

This will generate a file named bundle.js and save it to the ./dist/client folder.

If we start the Webpack-Dev-Server again using npm run dev, then we still won't see the production version of bundle.js.

Instead, we can use a package called http-server

npm install --global http-server

Now start it indicating the client root folder.

http-server ./dist/client

And visit http://127.0.0.1:8080 in your browser.