Lesson 8 / 25

Dependency graph and bundling

Learn how Webpack builds the dependency graph.

Building the dependency graph

Webpack starts from entry points and traverses imports, building a graph of all dependencies. Each file is a node; imports create edges. The graph determines which code to include in the bundle. Unreachable code (dead code) is never included unless forced.

Visualize dependencies

See how Webpack traces module dependencies to build the bundle.

Dependency graph showing modules and their connections. — Figure 2.1 — Dependency relationships in your bundle.

Simple dependency example

Track how Webpack builds the graph from imports.

// src/index.js
import { greet } from './utils.js';
greet('World');

// src/utils.js
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

Output:

Graph: index.js -> utils.js (dependency edge)