Lesson 1 / 25

Introduction to bundling

Understand why bundling matters and what Webpack solves.

Why bundling exists

Modern applications split code into modules for maintainability. Browsers load files via HTTP requests, each with overhead. Bundling combines modules into fewer files, reducing network requests and improving load time. Webpack is a module bundler that transforms your source files into optimized output.

Webpack transformation pipeline

See how Webpack processes your code from source to bundle.

Webpack bundling pipeline showing source files to bundled output.
Figure 1.1 — From modules to optimized bundles.

Bundle size matters

Smaller bundles load faster. Webpack tools like code splitting, tree-shaking, and minification help reduce bundle size. Always measure your bundles in production to catch regressions early.

Quick check

Quick check: What is the primary purpose of bundling?

  • Reduce HTTP requests and improve load time.
  • Make code harder to understand.
  • Add extra features to modules.
Answer

Reduce HTTP requests and improve load time. — Bundling combines multiple modules into fewer files, reducing network overhead and speeding up application load.