1. Introduction to Module Bundling

🏗️ How Bundlers Work Under the Hood

Bundlers work by traversing your application's dependency graph. Starting from one or more entry points (like index.js), the bundler reads each file, parses it to find import/export statements, and builds a graph of all dependencies. It then transforms each file (applying loaders for TypeScript, JSX, CSS, etc.), resolves module specifiers to actual file paths, and finally outputs one or more bundle files. This process is called "static analysis" because it happens at build time, not runtime.

Modern bundlers use different strategies for development vs production. In development, they prioritize speed with features like Hot Module Replacement (HMR). In production, they prioritize optimization with minification, tree shaking, and code splitting. Understanding this dual-mode operation is essential for effective bundler usage.

📋 The Evolution of JavaScript Modules

JavaScript modules have evolved significantly. The original script tag approach had no module system — everything was global. AMD (Asynchronous Module Definition) and CommonJS emerged for server and browser. ECMAScript Modules (ESM) became the standard in 2015. ESM is now supported in all modern browsers and Node.js. Bundlers support all these formats, transforming them into a format the browser can understand.

Understanding the module formats helps you understand bundler behavior. ESM is statically analyzable, enabling tree shaking. CommonJS is dynamic, making tree shaking harder. Modern bundlers prefer ESM for optimal optimization.

• Script Tag (Global): No module system, everything is global.
• AMD (RequireJS): Asynchronous module loading for browsers.
• CommonJS (Node.js): Synchronous module loading for servers.
• ESM (ECMAScript Modules): Standard JavaScript modules, statically analyzable.

📝 Try It Yourself: Understanding the Bundling Process

Follow these steps to see bundling in action.

Step 1: Create a simple project
mkdir bundling-demo
cd bundling-demo
npm init -y
npm install --save-dev webpack webpack-cli

Step 2: Create source files
// src/index.js
import { greet } from './greet';
console.log(greet('World'));
// src/greet.js
export function greet(name) {
return `Hello, ${name}!`;
}

Step 3: Create a basic webpack config
// webpack.config.js
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
};

Step 4: Add a build script
"scripts": {
"build": "webpack"
}

Step 5: Build and inspect
npm run build
Open dist/bundle.js to see how webpack has combined your modules.

Try It Yourself: Add more modules and dependencies. Observe how the bundle grows. Try the production mode (mode: 'production') to see minification in action.