Understanding WebPack and Babel

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

Babel is a javascript compiler that converts ES6( ES2015 ) JS code to ES5 JS code.

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.

Thus, we can simply say Babel is transpiler which translates ES6 JS code to ES5 JS code.

Let's see an example :

ES6 CODE

const a = [1, 2, 3, 4, 5];

a.map(i => i*2);

RESULT : [2, 4, 6, 8, 10]

ES5 CODE ( Converted Code )

var a = [1, 2, 3, 4, 5];

a.map(function(i){ return i*2});

RESULT : [2, 4, 6, 8, 10]

To configure Babel for your React project, check out this link

Please give some :love: if you liked the article.