Filter/Tag
12 entries
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.