Skip to main content

Webpack

Deprecated

Do not use for new projects. Use Vite instead.

What is it​

Webpack is a module bundler for JavaScript applications using a loader/plugin architecture. Historically the standard build tool for frontend projects.

Why it's deprecated​

  • Slow dev server startup — bundles the entire app before serving; large projects take tens of seconds.
  • Slow HMR — edits cause cascading rebuilds; the feedback loop degrades as the project grows.
  • Complex configuration — extensive config files, loaders, and plugins required for basic tasks; Vite works zero-config for most setups.
  • Ecosystem has moved on — major frameworks (Nuxt, SvelteKit, Astro, Storybook) now use Vite.
  • Stagnant innovation — Webpack 5 still gets maintenance updates, but major innovation has shifted to Rust-based tooling (Rolldown, Oxc) powering Vite.

Vite

Migration path​

  1. Install Vite and the appropriate framework plugin: npm install -D vite plus the plugin for your framework (e.g. @vitejs/plugin-react for React, @vitejs/plugin-vue for Vue — see the Vite plugin guide for others)
  2. Create a minimal vite.config.ts (typically 5–15 lines vs 100+ lines of webpack config)
  3. Move index.html to project root (Vite uses it as entry point)
  4. Replace require() / CommonJS with ESM import/export
  5. Replace process.env.* with import.meta.env.*
  6. Update npm scripts: vite (dev), vite build (prod), vite preview (preview)
  7. Remove webpack, webpack-cli, webpack-dev-server, and related loaders/plugins

Resources​