What Is Webpack?
Webpack Module Bundler
Webpack is a module bundler that transforms JavaScript, CSS, images, and other assets into optimized bundles for the browser. It handles code splitting, tree shaking, and hot module replacement. Webpack was the dominant build tool before Vite emerged.
How Webpack Works
Webpack takes your project's modules (JS files importing other JS files, CSS, images) and creates optimized bundles. Loaders transform files (Babel for JSX, PostCSS for CSS), and plugins add capabilities (minification, HTML generation, environment variables).
Key Concepts
- Loaders — Transform files before bundling — babel-loader for ES6+, css-loader for CSS imports, file-loader for images
- Code Splitting — Split your bundle into smaller chunks loaded on demand — improves initial page load time
- Hot Module Replacement — Update code in the browser without a full page reload — see changes instantly during development
Frequently Asked Questions
Should I use Webpack or Vite?
Vite for new projects — it's faster and simpler. Webpack if you're maintaining an existing project or need highly specific build configuration that Vite doesn't support.
Is Webpack dead?
Not dead but declining for new projects. Vite, esbuild, and Turbopack are faster alternatives. Many existing projects still use Webpack and will for years.