Member-only story
Module Bundlers in 5 Minutes — the What, the Why, and the Which
Know the role of module bundlers in web development and use the three popular options
Module Bundlers — you have probably heard of them a thousand times, but have you ever thought about the need for them or what they do under the hood? Well, to understand what they do, we need to go back in time a little. So, let’s dive in.
Why Do We Need a Module Bundler?
Back in ancient times, all you needed to build a website were HTML, JS, and CSS, and things were much simpler. But when the internet grew exponentially, so did the need for building more complex web pages and apps. Imagine that we are writing a complex website the old school way using just those three. In an ideal case, we would break our JS into different files and include them in the HTML for simplicity. Here’s an example:
But in this case, each file will make separate HTTP requests, which results in five requests to load everything the application needs to work. To avoid this, we could combine them into one single file — which includes everything — as follows:
But this makes the file complex and big to manage manually. And it’s not an easy or straightforward process. For example, two files may have the same functions and variables, and it will be a headache before deployment to work on resolving issues.
Let’s also consider a more modern example of a project that is built with a JS framework like Angular and uses libraries from npm. This causes even more problems while deploying. We would have too many files to keep track of manually while building. If the project has a dependency on a library, that library may have a dependency on multiple other libraries for it to work. This will require the developer to create a complex and large dependency chart while building.
