Bundler

Why We Need Bundler

Optimizing Multiple Files into One File

In a modern web application, you often have many small files (JavaScript, CSS, images, etc.). Without a bundler, you'd have to manually load each of them into your HTML file:

<script src="index.js"></script>
<script src="utils.js"></script>
<script src="app.js"></script>
<!-- CSS files -->
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="theme.css" />

This leads to:

• Multiple HTTP requests for each file (which can slow down the page load time).
• Harder to manage dependencies across various files

A bundler solves this by combining everything into a single file (or few files) for efficient loading:

<script src="bundle.js"></script>
<link rel="stylesheet" href="styles.css" />

Handling Dependencies (Module System)

Modern JavaScript development often involves breaking up code into modules using ES6 imports/exports or CommonJS modules. Without a bundler, you’d have to include every file manually, which becomes complex when you have hundreds of files.

In this case, you'd need a bundler like Webpack to:

• Resolve all dependencies automatically.
• Combine all modules into a single file.

Support for Non-JavaScript Files

A bundler isn’t just for JavaScript — it can also handle other assets like CSS, images, fonts, etc. For instance, you might want to include a .scss file (Sass), which is not natively understood by browsers.

/* styles.scss */
$primary-color: blue;
body {
  background-color: $primary-color;
}

A bundler like Webpack or Parcel can automatically:

1. Compile SCSS into regular CSS.
2. Inline images or fonts into your code using Base64 encoding.

Major JavaScript Bundlers

Bundler	Key Strength	Used By
Webpack	Highly configurable and powerful	React, Angular, enterprise apps
Vite	Super fast development (uses ES modules & HMR)	Vue, React, Svelte, modern frameworks
Parcel	Zero-config, beginner friendly	Small to medium projects, static sites

webpack

Webpack is a module bundler for JavaScript applications.

• It takes your application (written in modules like JS, CSS, images, etc.).
• Resolves all dependencies.
• Bundles everything into one or more output files (usually bundle.js). You can think of Webpack as a factory:
• Input: Multiple small modules (JS, CSS, images, fonts).
• Process: Loaders + Plugins.
• Output: Optimized bundle(s) ready for the browser.

Why Webpack

Before bundlers like Webpack, developers had to include multiple <script> and <link> tags manually, which:

• Caused dependency order issues.
• Made debugging hard.
• Increased loading times.

Webpack solves this by:

• Handling dependencies automatically.
• Supporting modern features (ES6, TypeScript, JSX).
• Optimizing performance (minification, tree-shaking, code splitting).
• Allowing hot-reloading for faster development.

Installation

1. Install Webpack

   npm init -y
   npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

2. Configure Webpack

   Create webpack.config.js in root directory:

   const path = require("path");
   
   module.exports = {
     mode: "development", // or 'production'
     entry: "./js/src/index.js", // Correct path to your entry file
     output: {
       filename: "bundle.js", // The output bundled file
       path: path.resolve(__dirname, "js/dist"), // Output directory (inside js/)
     },
     module: {
       rules: [
         {
           test: /\.js$/, // Process JavaScript files
           exclude: /node_modules/, // Don't transpile node_modules
           use: {
             loader: "babel-loader", // Use Babel to transpile JS
           },
         },
       ],
     },
   };

3. Build Bundle

   npx webpack

   This generates dist/bundle.js.

   Run dev server with hot reload:

   npx webpack serve

How Webpack Works

Entry Point

Webpack starts with an entry point, which is the main file that will act as the starting point of the dependency graph. For our example:

• Webpack identifies index.js as the entry point (defined in webpack.config.js).
• index.js imports exp from export.js, which is another file in your project.
• Webpack starts building a dependency graph, meaning it looks at index.js, then export.js, and then all the files those files depend on, and so on.

Processing the Files

Modules and Loaders:

When Webpack processes the files, it uses loaders to transform the code before bundling.

In the configuration file we discussed earlier, we use the babel-loader to process JavaScript files and transpile them to ES5.

Dependency Graph

Webpack analyzes all import/export statements and follows the dependencies through all your files. Here's how it processes:

1. Webpack starts with index.js.
2. It sees an import of exp from export.js, so it follows the reference to export.js.
3. Webpack finds all dependencies and recursively follows them (if any file imports other files), until all modules are accounted for.

This results in a dependency graph that tells Webpack how all your files are related to each other.

Bundling the Code

Once Webpack has built the dependency graph, it begins bundling.

• Bundling means combining all the modules (your JavaScript files, in this case) into one or a few files that the browser can load efficiently.
• For example, index.js, export.js, and any other imported modules are combined into bundle.js.