Webpack에서 Vite로 마이그레이션



레거시 Webpack 프로젝트를 더 빠른 Vite로 마이그레이션하는 가이드입니다.



Vite 장점



  • 빠른 HMR (Hot Module Replacement)

  • ESM (ES Modules) 기반의 빠른 개발 서버

  • 간단한 설정

  • 빌드 시 Rollup 사용으로 최적화된 번들



설치


# Vite 설치
npm install -D vite

# 또는 프로젝트 생성
npm create vite@latest my-app

# 플러그인 설치 (React 예시)
npm install -D @vitejs/plugin-react


vite.config.js 기본 설정


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: "dist",
    sourcemap: true
  }
});


Webpack 설정 → Vite 변환


// Webpack resolve.alias
resolve: { alias: { "@": path.resolve(__dirname, "src") } }

// Vite 동일 설정
resolve: { alias: { "@": "/src" } }

// Webpack DefinePlugin
new webpack.DefinePlugin({ "process.env.API_URL": JSON.stringify(url) })

// Vite 동일 설정
define: { "process.env.API_URL": JSON.stringify(url) }


환경 변수 마이그레이션


# .env 파일
# Webpack: REACT_APP_ 접두사
REACT_APP_API_URL=http://api.example.com

# Vite: VITE_ 접두사
VITE_API_URL=http://api.example.com

# 코드에서 사용
// Webpack
process.env.REACT_APP_API_URL

// Vite
import.meta.env.VITE_API_URL


index.html 이동


<!-- Vite는 index.html이 루트에 위치해야 함 -->
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <!-- Vite 방식: type="module" 필수 -->
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>


package.json 스크립트 변경


{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}


일반적인 마이그레이션 체크리스트



  1. Vite 및 플러그인 설치

  2. vite.config.js 생성

  3. index.html 루트로 이동

  4. 환경변수 접두사 변경 (VITE_)

  5. require() → import 변환

  6. process.env → import.meta.env 변환

  7. webpack 관련 파일 삭제



주의사항



  • CommonJS 모듈은 ESM으로 변환 필요

  • 일부 Webpack 플러그인은 Vite 대체품 필요

  • CSS/SCSS 로더 설정 확인