Skip to content

Setup a Webpack Production Configuration

Video Lecture

Setup a Webpack Production Configuration Setup a Webpack Production Configuration

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.

Comments