Webpack

1. Overview

Webpack is bundling and build an orchestration tool.

1.1 Motivation

All js files are relatively small but we have a lot of HTTP requests. The problem with that can be seen if we have a look at that waterfall on chrome DevTools's network tab. Every HTTP request that needs to be made of course takes a little time. That's not an issue but every HTTP request has like a base overhead a base duration it always takes does little box you see in front of these graphs here.

That's the time it requires the browser to set up that request and send it. So whilst the actual downloading of the file might be relatively fast. Setting up the request, doing the work on a server that serves the files that all takes some time.

If you deployed it to the Web having that many requests can really introduce a lot of latency and slow down your project just because of the share amount of HTTP requests made. So if we can find a solution to reduce that amount of HTTP requests that would be amazing and that's where Webpack comes into play.

1.2 Features

• Code bundles, fewer imports required
• Optimized(minified) code, less code to download
• More build steps can be added easily

2. Reference

https://webpack.js.org/