webpack-demos

This repository is a collection of 15 short, self-contained examples that teach how Webpack works. Webpack is a tool developers use to take many separate JavaScript files and combine them into one (or a few) optimized files that a browser can load efficiently. Instead of reading dense documentation, learners can clone this repo and run each demo in sequence to see exactly what Webpack does at each step.

The demos start from the basics, showing how a single entry file gets turned into a bundle, and progressively introduce more advanced ideas. Along the way they cover how to include CSS and images inside JavaScript, how to transform modern JavaScript syntax so older browsers can understand it, how to split a large codebase into smaller chunks that load only when needed, and how to separate third-party libraries into their own file so the browser can cache them between page loads.

Each demo lives in its own numbered folder and comes with a small configuration file, a minimal HTML page, and source files that illustrate exactly one concept. To run any demo, you install dependencies once at the root level and then start a local development server inside the demo folder. The server opens a browser tab automatically so you can see the result.

The collection also demonstrates several Webpack plugins: one that shrinks the final file size by stripping unnecessary characters, one that generates the HTML page automatically, and one that injects environment-specific code only during development. A final demo shows how to wire up a React application with page routing using the same Webpack setup.

This is a learning resource, not a production template. Each example is intentionally minimal so the concept being shown stays visible without surrounding noise.