Intro to Module Bundlers

A detailed introduction to one of the most powerful web development tools

Caelin Sutch
Nov 21 · 4 min read

The modern web application is incredibly complex. With Javascript tools like React, Angular, CSS tools like Sass or Less, and HTML tools like pug, any web project is implementing a variety of libraries and technologies.

Image for post
Image for post
Photo by Clément H on Unsplash

All of these tools run on Javascript. In ECMAScript 2015+, you can separate your code into multiple files and import these files into your application when needed to use their functionality. For example, when building a React application you always write import React from 'react' at the top of each JS file.

This functionality isn’t built into browsers by default, so modern code bundlers were built to bring this capability in a couple forms: by asynchronously loading javascript as it’s needed, or by combining all the javascript into a single file that’s loaded via a <script> tag.

Without module bundlers, you would have to manually combine files or load Javascript into HTML with countless <script> tags, which works, but has several key disadvantages:

  • You have to keep track of which code is needed and the proper load order
  • Multiple <script> tags means more calls to the server, worsening performance
  • Tons of manual work

If you think about using NPM modules, this is hundreds of <script> tags and manual work you’d have to do to implement all the third party dependencies you’re using.

This is where a comes in, it automates this process of combining, minifying (making code smaller/more efficient), code splitting (to reduce initial load time), and loading Javascript for you. It works directly with package managers like npm or bower to combine third party code with your code efficiently.

At the most fundamental level, a module bundle combines multiple JS files (like your source code and third party source code) into a single large file called the “Javascript Bundle”. If you’re using packages from NPM, it handles the importation of dependencies and the dependencies of dependencies, creating a dependency graph that keeps track of how to put all the code together. Let’s take a look at how this works in a real project by using the most popular module bundler today, webpack

Image for post
Image for post
How the bundler combines JS modules into static assets

Creating a Basic Webpack Project

Open up your workspace and create a file in the src folder called index.js . Currently this file has no dependencies, so there’s no reason to have a module bundler. Write console.log('hello world') in your index.js file. Since there’s no reliance on external modules, this would work in Node or in the browser just fine.

Now, create an NPM module and bring in some dependencies. Run npm init -y in your terminal to initialize an NPM project.

Lets install the most popular npm library, lodash. Run npm i -s lodash. This will install lodash for you.

Create an index.html file in the public folder. This is the frontend of your application. Add the following code to this html file:

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>Document</title>
<script src="../src/index.js"></script></head>

<body>
</body>
</html>

Currently, our index.js file isn’t using lodash , so if you view the index.html file in your browser and open up the console, you’ll see “hello world” in the console. Now that’s all nice, but what if we want to use lodash?

Lets update our index.js file with the following:

import {camelCase} from 'lodash';console.log(camelCase('Hello World'))

Now, we’re importing the camelCase function from lodash and using it in our console log.

If you open up the console you’ll see an error: Uncaught SyntaxError: Cannot use import statement outside a module .

The reason we get this error is because the browser has no idea where to find lodash . This is where Webpack helps us out. Run npm i --save-dev webpack webpack-cli to install Webpack.

Now, set up a script in the package.json to actually run webpack. Insert the following into your package.json :

{
...
"scripts": {
"build": "webpack"
},
...
}

If you run npm run build , it’ll execute the webpack command, and automatically compile the src/index.js file into a dist/main.js file. Now, if we change our index.html file to reference this main.js file in the <script> tag:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="../dist/main.js"></script>
</head>
<body>
</body>
</html>

and open up index.html in our browser, we should see helloWorld printed on our console. Congrats! You’ve bundled up your first application!

Note that this is using the default Webpack config. If you want to configure this project more and use module loaders (to load non JS assets), a development server, or other features, reference the documentation for the Webpack config here.

Conclusion

As we’ve seen, module bundlers are incredible tools for building modern websites. We took a look at building a basic Webpack project, and bundling together source code and external libraries into a single efficient file. This is a very basic introduction to Webpack, there are tons of powerful features that you can explore by reading the Webpack documentation.

Keep in Touch

There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running and growing companies. You can signup for my newsletter here

Feel free to reach out and connect with me on Linkedin or Twitter.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store