Ask Claude to Migrate Your Webpack Config to Vite

Migrating from Webpack to Vite involves more than renaming config keys — entry points, aliases, environment variable handling, and custom loaders all need translation. Claude can do the heavy lifting.

Convert this webpack.config.js to a Vite config. The project is a 
React TypeScript app. Note anything without a direct Vite equivalent 
and suggest how to handle it.

[paste your webpack.config.js here]

Claude will produce a vite.config.ts with the correct plugins (@vitejs/plugin-react, vite-tsconfig-paths), translated resolve.alias entries, and a mapped define block for environment variables. For custom Webpack loaders — like raw-loader or @svgr/webpack — it will suggest the equivalent Vite plugin or a minimal inline workaround.

It'll also flag the things Vite handles differently from Webpack:

// Webpack: process.env.REACT_APP_API_URL
// Vite:    import.meta.env.VITE_API_URL
// Claude will tell you to update your source files too

Claude explains which .env variable prefix changes are required across your source files, so you don't end up with silent undefined values after the migration.

Follow up with "write a vitest.config.ts that reuses the same aliases" to complete the toolchain switch in one go.

Webpack-to-Vite migrations are tedious but mechanical — exactly the kind of task Claude excels at.