</>SkillByAI
🇬🇧 English

Lesson 1 / 25

Introduction to bundling

Learn why JavaScript projects need a module bundler and how Webpack turns many source files into optimized bundles.

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?

  • Make code harder to understand.
  • Reduce HTTP requests and improve load time.
  • Add extra features to modules.
  • Replace JavaScript with a different language.
Answer

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