빌드 도구난이도 어려움⏱ 반나절~며칠(설정 복잡도에 따라)
커스텀 Webpack에서 Vite로 마이그레이션
Webpack→Vite
요약: webpack의 entry·loader·plugin 개념을 Vite의 진입 index.html·내장 변환·플러그인으로 옮깁니다. 대부분의 흔한 loader는 Vite가 기본 지원합니다.
왜 옮기나
- Vite는 dev에서 번들 없이 ESM을 직접 서빙해 콜드 스타트가 매우 빠릅니다.
- webpack 설정의 상당 부분(babel-loader·css-loader·file-loader)을 Vite가 내장 처리해 설정이 줄어듭니다.
- 프로덕션 빌드는 Rollup 기반으로 tree-shaking이 강력합니다.
전제 — 현재 상태
커스텀 webpack.config.js, entry/output, 각종 loader와 plugin, HtmlWebpackPlugin.
마이그레이션 단계
1
Vite 설치
Vite와 프레임워크 플러그인(React 등)을 설치합니다.
npm install -D vite @vitejs/plugin-react2
index.html을 진입점으로
HtmlWebpackPlugin 템플릿 대신 루트 index.html에서 <script type="module" src="/src/main.jsx">로 진입합니다.
3
loader → 내장/플러그인 매핑
babel/ts-loader·css-loader·style-loader·file-loader는 Vite 기본 지원입니다. PostCSS는 postcss.config.js를 그대로 인식합니다. 특수 loader만 대응 플러그인을 찾습니다.
4
alias·env 이전
webpack resolve.alias는 vite.config의 resolve.alias로, DefinePlugin env는 import.meta.env로 옮깁니다.
resolve: { alias: { '@': '/src' } }⚠️ 막히는 케이스 · 함정
- CommonJS 전용 의존성은 optimizeDeps나 @rollup/plugin-commonjs 설정이 필요할 수 있습니다.
- webpack 전용 기능(특정 magic comment, require.context)은 Vite의 import.meta.glob 등으로 대체합니다.
- process.env 직접 참조는 import.meta.env로 모두 교체해야 합니다.
✅ 검증: dev 서버 HMR, 프로덕션 빌드 산출물, 코드 스플리팅·에셋 경로가 정상인지 확인합니다.
ViteWebpack빌드도구RollupHMR