पाठ 8 / 25

Dependency graph और bundling

सीखें कि Webpack कैसे dependency graph बनाता है।

Dependency graph बनाना

Webpack entry points से शुरू करके imports को traverse करता है, सभी dependencies का एक graph बनाता है। प्रत्येक file एक node है; imports edges बनाते हैं। Graph यह determine करता है कि bundle में कौन सा code include करना है।

Dependencies को visualize करें

देखें कि Webpack कैसे module dependencies को trace करके bundle बनाता है।

Dependency graph जो modules और उनके connections को दिखाता है। — चित्र 2.1 — आपके bundle में dependency relationships।

Simple dependency example

Webpack कैसे imports से graph बनाता है यह track करें।

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