# Introduction to bundling — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-01

> 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.](assets/figures/webpack/webpack-pipeline.svg) — 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

**Quiz:** What is the primary purpose of bundling?

- [x] 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.