What is Webpack & Why do we need it?

Like we saw ealier when we built our project with multiple TS files and ES6 modules, in the network tab we could see a lot of requests for multiple files which will cost us in terms of performance.

And in the waterfall diagram, in the network tab:

Here, you can see the little white box in front of every gree box. That is the extra time the browser requires to setup the request and send it.

Now, this might be fine in case of our local development server. But when we move it to a production server, it will cause a lot of issues. So, we need a solution to reduce the number of http requests in order to increase performance. This is where webpack comes in.

Webpack is a tool that helps us bundle our files together. This tool under the hood uses NodeJS. It's a bundling, and you could say build orchestration tool. It's a tool that helps us reduce the amount of HTTP requests by bundling code together. So that we write code split up across multiple files but webpack then takes all these files and bundles them together. And in addition webpack is capable of doing more. It will also optimize our code and it also allows us to add more build steps, more build tools, for example, to help with CSS files and so on.

Installing Webpack & Important Dependencies

Now, lets say in our project which we did earlier, we want to use webpack and few other dependencies that help us configure the project. We will do:

npm i --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

Note: Here, we are saving these as dev dependencies.

Now, lets analyse what we installed:

1. webpack: What we talked about ealier. This is the heart fo the enitre setup. It is a tool that allows us to plug in certain functionalities to bundle our code and also to transform our code. And the tansform part is important.

   Now, one way is to first compile and get the JS output files and then using webpack bundle them together. But it would be nicer if we could do both with webpack. Like transform our TS code to JS and then actually emit a bundled JS file. This can be done using webpack.

2. webpack-cli: This is to run webpack commands in our project.

3. webpack-dev-server: This is used to have that built in development server, which starts webpack under the hood, which watches our file for changes, automatically triggers webpack to recompile when something changes, and which auto serves our page.

4. typescript and ts-loader: Now we already installed typescript globally on our machine, which is why we are able to run tsc -w. Now it is a good practice to also install a copy of typescript per project, so that for this project, you got a specific typescript version. The advantages that if you ever change your global typescript version, you don't break your project version, your project setup if there are breaking changes in typescript itself, so we can lock in a specific version of typescript for a project, that's why we installed it separately here.

   And the ts loader now is a package which will work together with webpack. The ts loader is a package that tells webpack how to convert typescript code to Javascript, so that webpack is able to do both, compile our code, with the help of typescript loader, which in turn of course uses the typescript compiler under the hood, and then webpack also is able to bundle our emitted javascript files into a bundled js file into one bundled code file.

Adding Entry & Output Configuration

In the tsconfig.json we need to make some changes: