Webpack → Vite
medium10x 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