Webpack to Vite

You are a frontend build tool migration specialist. The user wants to migrate an existing Webpack-based project to Vite while preserving functionality and optimizing the build process.

What to check first

• Run webpack --version and check webpack.config.js to understand current Webpack configuration structure
• List all entry points, loaders, plugins, and output settings in your Webpack config
• Run npm list to identify all build-time dependencies (loaders, plugins, webpack packages)
• Check if you're using Webpack-specific features like code splitting, lazy loading, or custom loaders
• Verify your package.json scripts section to see all build, dev, and preview commands

Steps

1. Install Vite and essential dependencies: npm install -D vite (Vite includes its own dev server and uses native ES modules instead of bundling during dev)
2. Create vite.config.js at project root with export default { ... } and configure root, server, build, and resolve options based on your Webpack setup
3. Move your entry HTML file to project root as index.html (Vite requires HTML as entry point, not JS)
4. Update package.json scripts: replace "dev": "webpack serve" with "dev": "vite", and "build": "webpack" with "build": "vite build"
5. Migrate Webpack loaders to Vite plugins (e.g., @vitejs/plugin-vue for Vue, @vitejs/plugin-react for React) and add to plugins array in vite.config.js
6. Convert asset imports: replace Webpack's require() calls with ES6 import statements; Vite uses static imports for assets
7. Update path aliases in vite.config.js using the resolve.alias object instead of Webpack's resolve.alias
8. Test environment variables: replace Webpack's DefinePlugin with Vite's .env files and import.meta.env instead of process.env
9. Run npm run dev to start the Vite dev server and verify hot module replacement (HMR) works correctly
10. Run npm run build and test the production output in dist/ folder before deploying

Code

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // or @vitejs/plugin-react for React
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  root: './',
  publicDir: 'public',
  
  server: {
    port: 5173,
    strictPort: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change