Front-End Build Tools

Chapter 6: Module Bundlers

6.1 Bundling Concepts

Module bundlers combine multiple files and dependencies into optimized bundles.

Bundling Process:

1. Parse entry file and dependencies
2. Build dependency graph
3. Transform files (transpilation, minification)
4. Combine into bundles
5. Optimize output

// Before bundling
// app.js
import { utils } from './utils.js';
import { Component } from './Component.jsx';

// utils.js
export function utils() { ... }

// Component.jsx
export function Component() { ... }

// After bundling
// bundle.js (single file with all code)
(function() {
    // All code combined and optimized
})();

6.2 Tree Shaking

// Tree shaking removes unused code
// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

// app.js
import { add } from './math.js';
// subtract is not imported, so it's removed from bundle