Convert webpack.config.js bundles into lightning-fast Vite configs (vite.config.ts). Eliminate multi-minute cold starts and reload delays.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
// Migrated from webpack.config.js (TypeScript React detected)
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
open: true,
},
build: {
outDir: 'dist',
sourcemap: true,
},
});
Vite leverages native browser ES modules during development instead of bundling whole dependency trees.
In Vite, index.html lives in the project root and references `<script type="module" src="/src/main.tsx">`.
Paste your webpack.config.js configuration file.
The migrator converts entry points and path aliases to Vite `resolve.alias` configuration.
Loaders (ts-loader, babel-loader, style-loader) are removed as Vite handles TypeScript and CSS natively.
Copy the output to `vite.config.ts` and adjust your root index.html script tag.
name: Build
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npx vite build
Perform identical migration routines across entire directories or repositories in your local terminal:
devflow migrate webpack-to-vite -i webpack.config.js -o vite.config.tsInstantly migrate npm scripts, dependencies, and configurations to Bun. Optimize script execution speeds and strip obsolete transpilations.
Convert legacy .eslintrc.json and .eslintrc.js configurations into ESLint v9 flat config (eslint.config.mjs) with typescript-eslint support.