Webpack vs Vite: Why Dev Server Speed Matters

Webpack and Vite solve the same problem — turning your source code into something browsers can run — but take opposite approaches in dev. Webpack's dev server bundles everything. At startup it builds a dependency graph, runs every loader (babel-loader, ts-loader, css-loader, etc.) on every file, produces a single bundle, and serves it. On a mid-size app this is 10-30 seconds cold start, and every time you save a file, HMR walks the graph from the changed module to re-emit the affected chunk. Vite takes a fundamentally different approach. In dev, Vite doesn't bundle at all. It serves your source files as native ES modules over HTTP. When the browser loads index.html, it sees import statements and fires individual HTTP requests for each module; Vite transforms each request on demand (TypeScript to JS, JSX to JS, CSS to JS imports), using esbuild which is orders of magnitude faster than Babel. Third-party dependencies — React, lodash, etc. — are pre-bundled once with esbuild into a single ESM file per dependency, because node_modules can have hundreds of tiny files and making the browser request each one would be slow. The dev server cold start is near-instant — nothing is bundled upfront. HMR is near-instant because a change only requires re-transforming the single affected file, not walking any graph. Why didn't Webpack just do this? Native ESM in browsers only became practical recently, and Webpack's architecture assumes bundling. For production, Vite does bundle — it uses Rollup to produce traditional chunked bundles, because a real user visiting the site can't afford hundreds of HTTP requests per page load. So Vite is "ESM in dev, Rollup in prod" — two modes. When to pick: Vite is the default for new projects in 2026. Webpack remains sensible for huge legacy codebases where migration cost exceeds benefit, or for complex custom plugin/loader chains or Module Federation setups where Webpack has deeper tooling. Rspack, the Rust reimplementation with Webpack config compatibility, is a middle path for teams wanting Vite-like speed without rewriting their Webpack config.