Skip to content
Home / Migrations / Webpack → Vite

Webpack → Vite

medium

10x faster dev server, simpler config. Most webpack plugins have Vite equivalents.

Estimated: 4-8h · 6 steps
Progress0%
Step 1: Install Vite

Add Vite and framework plugin.

npm install -D vite @vitejs/plugin-react && npm uninstall webpack webpack-cli webpack-dev-server
Step 2: Create vite.config.ts

Minimal config. Most things work out of the box.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({ plugins: [react()] })
Step 3: Update index.html

Move index.html to project root (not public/). Add <script type="module" src="/src/main.tsx">.

Step 4: Fix imports

Vite requires file extensions for non-JS imports. Replace require() with import. Fix process.env → import.meta.env.

Step 5: Replace webpack plugins

html-webpack-plugin → not needed. copy-webpack-plugin → vite-plugin-static-copy. define-plugin → define in vite.config.

Step 6: Update scripts

package.json: dev → vite, build → vite build, preview → vite preview.

✓ npm run dev starts in < 1 second

What this migration involves

Moving from Webpack to Vite is rated medium and takes about 4-8h on a typical project. The guide breaks it into 6 steps, 2 of which ship with runnable commands and 1 with a verification check.

Vite data →

Related migrations

Create React App → Vite — easy, 1-2hBabel → SWC — easy, 1-2hVite 5 → Vite 6 — easy, 1-3hCreate React App → Rsbuild — easy, 1-2hWebpack → Rspack — easy, 1-3h

FAQ

How long does migrating from Webpack to Vite take?

Around 4-8h for a typical project — 6 steps, difficulty rated medium, 2 of them with copy-paste commands.

Is moving from Webpack to Vite reversible?

No reverse guide is tracked yet, so treat this as a one-way move and keep a full export of your Webpack data before you start.

What does Vite cost compared to Webpack?

Vite: open-source from $0/mo, free plan available.