Skip to content

Set up the Webpack Production Script

Video Lecture

Set up the Webpack Production Script Set up the Webpack Production Script

Description

We have been using the webpack.dev.js file 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. However, it is a very large file 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 it 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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const path = require('path')

module.exports = {
  mode: 'production',
  performance: {
    hints: false
  },
  entry: './src/client/client.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../../dist/client')
  }
}

After creating the above file, open ./package.json and then add the highlighted lines below to the scripts option.

1
2
3
4
5
  "scripts": {
    "build": "tsc -p ./src/server && webpack --config ./src/client/webpack.prod.js",
    "start": "node ./dist/server/server.js",
    "dev" : "concurrently -k \"tsc -p ./src/server -w\" \"nodemon ./dist/server/server.js\" \"webpack serve --config ./src/client/webpack.dev.js\""
  },

Now open a terminal and enter,

npm run build

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

Now, instead of starting our project using npm run dev, we can start the production version using npm start.

npm start won't start the Webpack Dev Server, so it won't serve the dynamically created bundle.js or start in HMR mode, but will run the ./dist/server/server.js script that was created by the tsc command, and is serving static files from the ./dist/client/ folder.

So run,

npm start

And visit http://127.0.0.1:3000