Capstone Config & Migration

Assemble a production-grade Vite config from everything in the series, then map each Webpack/CRA concept to its Vite equivalent.

Techniques

Readiness

0
starter

vite.config.ts


        

      

    


    

      
The concepts transfer — you already learned them. Here's the translation:

      

        
Webpack / CRAVitePart

        
      

      
// migration order that minimizes pain:
// 1. scaffold: npm create vite@latest, copy src/
// 2. move index.html to root, add <script type="module" src="/src/main">
// 3. rename env vars: REACT_APP_* / process.env.*  →  VITE_* / import.meta.env.*
// 4. swap require() for import; fix any CommonJS-only deps
// 5. replace webpack loaders with Vite built-ins / plugins
// 6. run, fix import paths & aliases, then delete webpack config