If you’re starting your web development journey, or maybe have already dived into it, but are not really sure what JS bundlers are and what’s their role, you’re reading a proper piece of explanation 🙂
Chaos and complexity – the issues
index.html. Our HTML is hydrated with
index.js file, which adds some interactivity to it. In order to use it, we need to import
index.js script in
index.html file. We also decided to use an external library (Bootstrap), so we should also link the necessary CSS.
We are linking the
index.js with a
script tag in
index.js. That’s why we created two separate files with some functionalities:
For instance, the
my-utils.js exports a few functions:
Notice the not used functions there – we’ll get to the point of them soon.
index.js file imports what it needs and adds some interactivity to the HTML elements:
If we now open our webpage, we can see the network activity when the page is loaded:
What’s more, if you check the contents of
my-utils.js, it obviously loads the whole script, containing even the not used functions:
index.js file. Modern bundlers support multiple entry points. It can be very useful if you’re building a multipage application, so each page can have its own entry point.
This is how you can imagine the graph of dependencies:
Module bundlers like webpack not only know the dependencies of your entry point. These tools even check what each dependency uses. Thanks to building such a detailed dependency graph, the bundler can introduce multiple optimizations into the bundle file.
What’s interesting, modern bundlers can handle not only JS files, but also CSS, HTML and even images.
You might have heard unpleasant things about webpack and in fact, its configuration can get really spaghetti 🤪 There are simpler alternatives out there, but let’s start with what’s the most common tool used in web development today.
Our sample app already has a
npm install --save-dev webpack webpack-cli
Now we should reorganize the files a bit. Let’s put all scripts in
src folder and move
dist folder. Finally, it looks like that:
Using the folder named
dist is very common. It stands for distributable, which means the code ready to be distributed = served to the public. This is where our bundles will be located. As the
index.html is directly served to the public, we also place it there.
With such a folders structure, there’s nothing more we need to configure for webpack to work. By default, webpack looks for
src/index.js file which we already have and outputs bundles into the
dist folder. To use more advanced features or multiple entry points, a configuration file should be added.
In our case, let’s go with the zero-config approach. The only thing we need is to add a
script entry to
Let’s now run
npm run build and see what happens:
It seems that webpack created the
main.js asset (bundle):
Let’s make sure that our
index.html page links this bundle file properly:
Now, let’s open our
index.html page and see how the network requests look like now:
Wow, that’s something different from what we had previously! Notice that now only 1 script, the
main.js file, is fetched by the webpage. There were 3 before:
navigation.js. Of course, the web page works exactly as before.
Let us also examine the contents of the fetched
Pay attention what happened here. Webpack has nicely inlined all the external code we used directly into the
main.js bundle. What’s more, the exported, but not used functions from
my-utils.js are not present here at all! When building the dependency graph, webpack noticed that those functions are not used, so it didn’t include them😉
You can find full source code of the webpack app here.
Webpack has a lot more to offer
You can do really crazy stuff with webpack 😉 However, if you are starting your web development journey, don’t get overwhelmed by learning it all. Just be aware that webpack can do almost everything you might need. It’s just a matter of searching StackOverflow or asking Copilot 😉
Alternatives to webpack
I recommend checking Parcel, esbuild and ViteJS. These are modern bundlers created to, among others, eliminate some of webpack’s burdens. If you’re starting out and don’t want to get yourself busy with bundling configuration, I especially recommend creating your next app with Parcel.
npm run build script 😉
If you’re a .NET developer, and you enjoyed this article, I think you may also find my free guide useful: