Introduction

Throughout this series, we have been referring to bundling and bundlers. In today's article, I will try to describe what they are. Although there are other bundlers like Browserify and Vite, we would be focusing on a popular and widespread bundler called Webpack.

You are in luck, because in addition to talking about Webpack, we would be taking a brief look at bundlers and how they work.

Bundlers

Let's say you want a build a Facebook that is going to host over a billion people, you know that's a lot of algorithmic thinking and consequently, a lot of code.

Possibly, millions of codes. If you going to put such files of code on the web, then this might affect your facebook's performance, since the browsers need to look through all files.

Now bundlers can take all these millions of files of code and bundle them into a single file. The browser can read this file faster and it can enhance performance. For example, if you have three files written in Tailwind, SASS, and raw CSS, a bundler can take these three files and compile them into one minified file of raw CSS.

To define Bundlers, a bundler is a tool that takes multiple files of code and packages and compresses these into a minified production-ready file for the browser.

Webpack

Webpack is a static module bundler for Javascript applications. Static in the sense that it pools all dynamic files and static assets and compresses them into a static file.

Mechanism

Webpack works with something the smart kids call a "dependency graph". Webpack looks up the core modules your application needs and then looks up the modules these core modules depend on, and so on (You define the core modules).

It just builds a dependency graph and bundles the modules into one or a few browser-readable modules.

Webpack.config.json

For now, don't bother about setting up webpack as we would be doing it in the next article in this series, however, all code will be written in a webpack.config.json file.

This file is used to configure webpack after installation. Just like the way package.json is used to configure node packages, webpack offers us more finesses with this file.

Features of Webpack

There are key features of webpack that make it both cliche and unique. A lot of features come with webpack, but these are the beginner-friendly ones:

entry

An entry is/are the starting module(s) webpack uses to start building its dependency graph. This entry is your core module.

module.exports = {
  entry: './path/to/my/entry/file.js',
};

output

Webpack automatically creates a filename and folder to store the bundled files. This is termed "Output".

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

path is a native node utility that helps designate file paths. The automatic path that node outputs to is done with path.resolve(__dirname, 'dist'), but since you have the webpack.config.json file, you can tweak it. Come on, try it.

loaders

Loaders enable Webpack to be able to compile code written in other languages. Normally Webpack understands only Javascript and JSON files, so it depends on an ecosystem of loaders to bundle other files.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

The code above means if the files end in this(/\.txt$) format, use this loader(raw-loader)

plugins

Plugins are used to require tools that are used to do a different range of tasks like configuring environment variables, managing assets, and any other thing that webpack allows. Please note that you can use both Webpack plugins and 3rd party plugins.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

mode

Webpack chooses different ways of outputting information based on the mode selected. It could either be in production mode or development mode.

module.exports = {
  mode: 'production',
};

In development mode, webpack tells us all the intricacies of what's going on behind the scene. In production mode, webpack details how code affects the end user.

Conclusion

Webpack is a nice tool for optimizing application performance. The reason we use webpack is to provide a better user experience and web performance.

In this article, we mainly looked at how webpack operates and the key features beginners need to know to understand how it works.

In the next article, we will use webpack to bundle a dummy website. Stay tuned 📻.

Resources

Here's more about webpack