Webpack & Build Tools
Bundlers, loaders, plugins, code splitting, HMR
Hatchling
Intermediate
Webpack Core Concepts
Webpack builds a dependency graph from your source code and bundles it into optimized outputs. Mastering the five core concepts â entry, output, mode, loaders, and plugins â is the foundation for everything else.
Dev Server, HMR & Source Maps
webpack-dev-server, Hot Module Replacement, and source maps form the core developer experience trifecta. Understanding their internals turns frustrating config issues into quick fixes.
Dinosaur
Advanced
Loaders, Plugins & Module Resolution
Loaders transform files one at a time; plugins reshape the entire compilation. Understanding their internals â pitch phase, Tapable hooks, enhanced-resolve â separates webpack users from webpack engineers.
Code Splitting & Tree Shaking
Code splitting delivers only the JavaScript users need right now; tree shaking removes the JavaScript they'll never need at all. Together they're the most impactful webpack optimizations you can make.
Webpack vs Vite vs Turbopack
The bundler landscape has exploded â Vite, Turbopack, esbuild, Rollup, and Rspack all challenge webpack's dominance. Knowing when to use each (and when webpack is still the right call) is an architect-level skill.