Intro to Web Bundling With Parcel.js

Dominant JavaScript libraries like React.js make it seemingly easy to write front-end applications out-of-the-box. Have you ever wondered how React can transform your complex, multi-layered application into static HTML pages that can be accessed from any browser? Web bundlers play a vital role here. Let’s explore web bundlers together through a simple interactive example.

What is Web Bundling?

Web bundling is the process of fetching, resolving, packing, reducing a tree of dependencies into compressed static files that you may readily host on the web. The original pioneering package in web bundling is the famous Webpack. Webpack provides a sophisticated configuration interface to allow the developer to customize certain stages in the web bundling pipeline.

For most mundane use cases, web bundling does not need explicit customization. This is where bundlers like Parcel.js come into the picture: Parcel.js allows you to bundle your web application with no configuration file. (note: Since Webpack 4, Webpack also offers basic web bundling with no configuration file.)

Benefits of Web Bundling

Immediate benefits that we can draw from using web bundlers are:

• Ability to scale without hurdles: Web bundlers can map out and bundle…