# Dependency graph and bundling — Webpack: Module Bundling and Build Optimization

Source: https://www.skillbyai.com/en/webpack/webpack-08

> See how Webpack walks your imports from each entry point to build the dependency graph that defines every bundle.

## 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.](assets/figures/webpack/webpack-learning-map.svg) — Figure 2.1 — Dependency relationships in your bundle.

## Simple dependency example

Track how Webpack builds the graph from imports.

```javascript
// 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)
```