Webpack

Webpack is a JavaScript module bundler that takes a project's source files (JS, CSS, images, fonts) and produces optimised static assets for the browser. Webpack defined the modern front-end build pipeline and dominated for nearly a decade; today it is being displaced by newer bundlers (Vite, esbuild, Turbopack, Rspack) but remains in use across a large installed base.

Core concepts

• Entry. One or more files where the dependency graph begins.
• Output. Where bundled files are written and how they are named.
• Loaders. Transform files of different types (babel-loader for ES future syntax, css-loader for CSS, file-loader for assets).
• Plugins. Augment the bundling process (HtmlWebpackPlugin, MiniCssExtractPlugin, DefinePlugin).
• Code splitting. Produce multiple chunks for dynamic imports, vendor splits, route-level lazy loading.
• Tree shaking. Remove unused ES module exports from production bundles.

Modern alternatives and successors

• Vite + Rollup / Rolldown. Dev with native ESM, build with Rollup.
• esbuild. Extremely fast bundler in Go; often used as a sub-tool inside other tools.
• Turbopack. Vercel's Rust-based successor to Webpack, default in Next.js.
• Rspack. Rust port of Webpack's API by ByteDance; drop-in for many projects.
• Parcel. Zero-config bundler with good DX.