Skip to content

Build the Client using Webpack

Video Lecture

Build the Client using Webpack Build the Client using Webpack

Description

In this lesson, I show how to use Webpack, to create the ./dist/bundle.js script from the client TypeScript source code.

This solution is best when your client application becomes,

  • larger and more sophisticated,
  • references one or more external JavaScript modules,
  • you want to bundle all the client scripts into one,
  • benefit from using HMR while developing,
  • benefit from tree shaking for modules that support it.

Update ./dist/client/index.html with this code.

./dist/client/index.html

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Socket.IO TypeScript Tutorials by Sean Bradley : https://sbcode.net/tssock/
    </title>
    <style>
      body {
        font-size: 4vw;
      }
    </style>
  </head>

  <body>
    <script type="module" src="bundle.js"></script>
  </body>
</html>

Install the Webpack dependencies.

npm install webpack webpack-cli webpack-dev-server ts-loader --save-dev
  • webpack : Contains the core that will bundle our code into development and production versions.
  • webpack-cli : the command line tools that we use to run webpack.
  • webpack-dev-server : A HTML server that will load our code and provide the HMR functionality, extra debugging capabilities and an error overlay during the development phase.
  • ts-loader : A module rule for processing TypeScript files.

Create a webpack.dev.js file in the ./src/client/ folder.

./src/client/webpack.dev.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
26
27
28
29
30
31
32
33
34
35
36
const path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'eval',
  devServer: {
    static: {
      directory: path.join(__dirname, '../../dist/client')
    },
    hot: true,
    proxy: [
      {
        context: ['/socket.io'],
        target: 'http://localhost:3000',
        ws: true
      }
    ]
  },
  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')
  }
}

Update the tsconfig.json to use the ESNext and NodeNext

./src/client/tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "outDir": "../../dist/client/",
    "moduleResolution": "Bundler",
    "strict": true
  },
  "include": ["**/*.ts"]
}

Note

I have updated the above tsconfig.json to now use moduleResolution = bundler since it is advisable when using Webpack 5.

Update the ./package.json scripts option with,

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

And then we can start, by typing the command,

npm run dev

Visit http://127.0.0.1:8080

Note

Since we are now using the Webpack Dev Server to develop through, the port number is now 8080.

It will proxy our Socket.io web socket requests internally onto port 3000.

GitHub

This Socket.IO TypeScript boilerplate, as it is now, can also be downloaded from the GitHub repository : https://github.com/Sean-Bradley/Socket.IO-TypeScript-Boilerplate.

git clone https://github.com/Sean-Bradley/Socket.IO-TypeScript-Boilerplate.git
npm install
npm run dev

# Visit http://127.0.0.1:8080