Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99
Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Setup a Webpack Production Configuration

Video Lecture

Setup a Webpack Production Configuration 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.