Webpack primer
A focused walkthrough of Webpack's core concepts — entry, output, loaders, plugins, and code splitting — so you can read and write configs with confidence.
Entry & output
Webpack starts at one or more entry points and builds a dependency graph. The entry field tells it where to begin; output defines where bundles land. A single string entry is fine for SPAs; objects enable multi-page setups.
Loaders
Loaders transform non-JavaScript files into modules Webpack understands. The test regex matches filenames and use chains loaders right-to-left. Common loaders: babel-loader, css-loader, style-loader, and ts-loader.
Plugins
Plugins hook into the compilation lifecycle for tasks loaders can't handle — bundle optimization, asset management, environment injection. HtmlWebpackPlugin generates an HTML file; DefinePlugin inlines compile-time constants.
Code splitting
Dynamic import() calls create split points. Webpack emits separate chunks loaded on demand. Combine with SplitChunksPlugin to extract shared vendor bundles and avoid duplication.
Mode & source maps
Set mode: 'development' for fast builds with readable output or 'production' for minification and tree-shaking. The devtool option controls source-map generation — start with 'eval-cheap-module-source-map' in dev and omit it in production unless you need stack traces.
Next step: Apply these concepts in a real config — see the Webpack config recipe.