# Introduction to bundling — Webpack: Module Bundling and Build Optimization

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

> 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.](assets/figures/webpack/webpack-learning-map.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?

- [ ] Make code harder to understand.
- [x] 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.