Build the Client using Webpack
Video Lecture
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 |
|
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 |
|
Update the tsconfig.json
to use the ESNext
and NodeNext
./src/client/tsconfig.json
1 2 3 4 5 6 7 8 9 10 |
|
Update the ./package.json
scripts
option with,
1 2 3 |
|
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