Understanding WebPack and Babel

December 28, 2019

WebPack

According to the official documentation:
Webpack is an open-source JavaScript module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images( if the corresponding loaders are included).
Let’s understand in simple terms.

Nowadays, we build web applications consisting of hundreds of javascript modules, lots of CSS to design our webpages and images.

Do you know what happens when a web page loads? Let’ see a snapshot of the network tab when I hit enter on amazon.com

The application has to literally load all the JS, CSS, SASS and image files. Thus, the load time of application will increase with an increasing number of dependency modules.

To solve this problem, WebPack is used which basically bundles all the javascript dependency to one static asset, all CSS module to one and similar images to other assets thus reducing the load time of application and improving the app performance.

Advantages

It makes the application load faster.

To know how to configure WebPack for your web application, please check out this link

Babel

You must be wondering why there is a need for this conversion. Well, ES6 is a modern and fancy syntax which browsers don’t understand. Now you can say if it was not browser supported why did we even build this syntax. The answer is ‘Simplification’ i.e doing more things by writing less.