# vite vs webpack — codebase comparison

> Canonical page: https://codevetter.com/unpack/compare/vite-vs-webpack

# vite vs webpack — codebase comparison

Vite's on-demand ESM dev server vs webpack's bundle-first graph — two generations of frontend build architecture.

| | vitejs/vite | webpack/webpack |
|---|---|---|
| Scanned commit | 1544bb1 (2026-09-22) | 87a62de (2026-09-22) |
| Files | 2718 | 3999 |
| Primary source root | packages | lib |

## vite

This is the Vite monorepo (`@vitejs/vite-monorepo`) at v8.3.0 — a pnpm workspace shipping three published packages: `vite` (the native-ESM dev server + Rolldown-powered bundler), `create-vite` (the scaffolding CLI), and `@vitejs/plugin-legacy` (SystemJS/Babel downlevel output for old browsers). The `vite` package is the bulk of it: a `cac`-driven CLI over four commands (dev/build/optimize/preview), a `connect` middleware stack that transforms modules on demand and pushes HMR over an authenticated WebSocket, and a Rollup-compatible plugin container that now runs on Rolldown/Oxc rather than Rollup+esbuild. What's distinctive at this commit is the Environment API — dev and build are both fanned out across named environments (`client`, `ssr`, custom) each with its own module graph, plugin container and optimizer — plus an experimental `bundledDev` mode that swaps the per-module transform pipeline for a lazy Rolldown dev bundle served from memory. Correctness is enforced almost entirely by a 83-playground / 109-spec Playwright+Vitest integration suite that runs every fixture in serve, bundled-dev, and build modes.

## webpack

webpack is the JavaScript module bundler (v5.111.1, MIT, `main: lib/index.js`, CLI at `bin/webpack.js`): a `Compiler` builds a module graph from entry dependencies, a `Compilation` seals that graph into chunks, and the result is emitted as static assets for web, Node, worker, Deno, Bun, Electron and universal targets. Everything is `tapable` hooks over CommonJS + JSDoc source — the public config API is defined by JSON Schema in `schemas/` and every type, validator and declaration is code-generated from it by `tooling/generate-types.js`. What is distinctive about this tree is how much webpack now owns itself: its own acorn-derived ECMAScript parser (`lib/javascript/syntax-parser.js`, 17.8k lines), its own CSS and HTML parser/printer/minifier pairs, generated lookup-table modules (`lib/{css,html,javascript}/data.js`), and a comparison harness in `tooling/` that benchmarks those against the ecosystem and gates printer invariants in CI. It is aimed at application developers via config, and at the plugin/loader ecosystem via ~100 exported classes and several hundred hooks.

Full evidence: https://codevetter.com/unpack/vite · https://codevetter.com/unpack/webpack

## Public product links

- [CodeVetter](https://codevetter.com/)
- [Download](https://codevetter.com/download)
- [Documentation](https://codevetter.com/docs/)
- [Source](https://github.com/Codevetter/codevetter)