Series · 12 parts

Webpack from Zero to Pro

Master Webpack 5 config from the ground up — every part ships a real config and a live, interactive demo. Start with the bundler mental model and your first build, then the config anatomy, loaders and plugins, the dev server with HMR and source maps, code splitting and lazy loading, tree shaking and production mode, long-term caching with contenthash, bundle analysis and performance, advanced resolve plus authoring your own loader and plugin, Module Federation for micro-frontends, and a production capstone with migration tips.

01 Webpack · Part 1 — The Mental Model & Your First Build

Why bundlers exist, the dependency graph Webpack builds from a single entry, the four core concepts (entry, output, loaders, plugins), and your first real build. With an interactive dependency-graph visualizer.
02 Webpack · Part 2 — The Config Anatomy

webpack.config.js from scratch — mode, entry, output, context, and resolve. Turn the zero-config magic into explicit configuration you control, including aliases and extensions. With an interactive config builder.
03 Webpack · Part 3 — Loaders

How Webpack transforms non-JS files into modules — babel-loader for TS/JSX, css-loader and style-loader, Sass, and built-in asset modules — plus why loader chains run right-to-left. With an interactive loader pipeline.
04 Webpack · Part 4 — Plugins

Where loaders transform individual files, plugins hook into the whole build — HtmlWebpackPlugin, DefinePlugin, MiniCssExtractPlugin, CopyWebpackPlugin — and how the tapable hook system works. With an interactive plugin lifecycle visualizer.
05 Webpack · Part 5 — Dev Server, HMR & Source Maps

The fast feedback loop: webpack-dev-server, Hot Module Replacement that preserves state, and choosing the right devtool source-map mode for development vs production. With an interactive HMR and source-map lab.
06 Webpack · Part 6 — Code Splitting & Lazy Loading

Stop shipping one giant bundle: dynamic import() for route-level lazy loading, splitChunks for vendor and shared code, runtimeChunk, and magic comments for naming and prefetching. With an interactive code-splitting visualizer.
07 Webpack · Part 7 — Tree Shaking & Production Mode

How Webpack drops unused exports: why ES modules are required, the role of sideEffects and usedExports, minification with Terser, and what mode: production turns on. With an interactive tree-shaking visualizer.
08 Webpack · Part 8 — Caching & Long-Term Caching

The file-naming strategy that lets browsers cache bundles for a year: [contenthash], deterministic moduleIds, extracting the runtime, and why splitting vendors keeps hashes stable. With an interactive contenthash cache simulator.
09 Webpack · Part 9 — Bundle Analysis & Performance

Measure what is actually in your bundle: webpack-bundle-analyzer treemaps, finding bloat and duplicates, performance budgets that fail the build, and prefetch/preload hints. With an interactive bundle analyzer.
10 Webpack · Part 10 — Advanced Resolve + Authoring Your Own Loader & Plugin

How module resolution actually works (resolve, alias, extensions, modules, externals), then write a real custom loader and a custom plugin tapping compiler hooks. With a live loader & plugin lab.
11 Webpack · Part 11 — Module Federation

Share code between independently deployed apps at runtime: hosts, remotes, exposes, remotes, and the shared singleton trick that stops React being downloaded twice. With a live federation visualizer.
12 Webpack · Part 12 — Production Capstone + Migration

Assemble every technique from the series into one battle-tested production config, with a copy-paste dev/prod split — then a clear-eyed guide to when and how to migrate to Vite or Rspack. With a config capstone builder.