Webpack과 Vite의 차이점은?
한 줄 답변
Webpack은 전체 모듈을 번들링 후 서버를 시작하고, Vite는 네이티브 ESM을 활용해 온디맨드로 변환하므로 개발 서버 속도가 훨씬 빠릅니다.
핵심 개념 정리
Webpack은 2012년에 등장한 JavaScript 모듈 번들러입니다. 프로젝트의 전체 의존성 그래프를 분석해 하나 또는 여러 번들 파일로 합친 뒤 브라우저에 전달합니다. CommonJS, AMD, ES Module 등 다양한 모듈 형식을 모두 지원하며, 수천 개의 로더와 플러그인 생태계를 보유해 복잡한 기업 프로젝트에서 폭넓게 쓰입니다.
Vite는 2020년 Vue.js 창시자 Evan You가 개발한 차세대 빌드 도구입니다. 개발 서버는 번들링 없이 브라우저 네이티브 ES Module(ESM)을 그대로 활용하고, 파일 요청이 들어올 때 그때그때 변환하는 온디맨드 방식으로 동작합니다. 모듈이 5,000개인 대형 프로젝트에서도 서버 구동 시간이 1초 이내인 경우가 많습니다.
가장 중요한 차이는 콜드 스타트 방식입니다. Webpack은 npm run dev 실행 시 모든 파일을 번들링한 뒤 서버를 띄우므로, 모듈이 수천 개인 프로젝트에서는 최초 구동에 30~60초가 걸리기도 합니다. Vite는 이 번들링 단계 자체가 없어 거의 즉시 서버가 준비됩니다.
HMR(Hot Module Replacement) 성능도 다릅니다. Webpack HMR은 변경 파일이 속한 청크 전체를 다시 빌드하기 때문에 파일이 늘수록 반응 시간이 길어집니다. Vite HMR은 ESM 그래프에서 변경된 모듈만 정확히 찾아 교체하므로 규모와 무관하게 50ms 이내에 반영됩니다. 의존성 사전 번들링(Pre-bundling)에는 Go 기반 번들러인 esbuild를 사용해 기존 JS 번들러 대비 최대 100배 빠른 속도를 냅니다.
프로덕션 빌드에서 Vite는 Rollup을 내부적으로 사용해 트리 쉐이킹과 코드 스플리팅을 처리합니다. Vite 5.x 기준으로는 Rust 기반 번들러인 Rolldown 도입이 예고되어 있어 프로덕션 빌드 속도도 크게 개선될 전망입니다. Webpack은 설정이 복잡하지만 세밀한 번들 제어가 필요한 레거시 환경에서는 여전히 강점을 지닙니다.
비교 정리
| 항목 | Webpack | Vite |
|---|---|---|
| 개발 서버 방식 | 전체 의존성 번들링 후 서버 시작 | 네이티브 ESM 활용, 온디맨드 변환 |
| 콜드 스타트 속도 | 모듈 수 비례해 느려짐, 대형 프로젝트 30~60초 | 모듈 수와 무관, 대부분 1초 이내 |
| HMR 성능 | 변경 청크 전체 재빌드, 파일 수 증가 시 느려짐 | 변경 모듈만 교체, 규모 무관 50ms 수준 |
| 프로덕션 빌드 도구 | 자체 번들러, 세밀한 제어 가능하나 설정 복잡 | Rollup 사용, 설정 간결하고 트리 쉐이킹 기본 지원 |
| 플러그인 생태계 | 10년 이상 축적된 방대한 로더·플러그인 생태계 | 상대적으로 작지만 빠르게 성장, Rollup 플러그인 호환 |
면접에서 이렇게 답하세요
먼저 두 도구의 핵심 철학 차이인 '번들링 vs 네이티브 ESM'을 한 문장으로 정리하고 시작하세요. 이후 콜드 스타트와 HMR 속도 차이를 30초 vs 1초, 50ms 같은 구체적 수치로 설명하면 답변의 신뢰도가 높아집니다. 실무 경험이 있다면 'CRA를 Vite로 마이그레이션했을 때 개발 서버 구동이 40초에서 1초로 줄었습니다'처럼 수치와 맥락을 함께 언급하세요. 마무리로 Vite가 무조건 우월한 것이 아니라, 레거시 CommonJS 의존성이 많거나 세밀한 번들 제어가 필요한 엔터프라이즈 환경에서는 Webpack이 적합하다는 트레이드오프를 짚으면 기술적 균형감을 보여줄 수 있습니다.
자주 묻는 추가 질문
Q. Vite가 프로덕션 빌드에서 esbuild 대신 Rollup을 사용하는 이유는 무엇인가요?
esbuild는 코드 스플리팅과 CSS 처리 등 일부 기능이 미성숙해 프로덕션 빌드에 Rollup을 사용합니다. Vite 5.x 이후 Rolldown으로 단계적 대체가 예정되어 있습니다.
Q. Vite의 의존성 사전 번들링(Pre-bundling)은 왜 필요한가요?
node_modules의 CommonJS 패키지를 ESM으로 변환하고, lodash처럼 내부 모듈이 수백 개인 패키지를 단일 파일로 합쳐 브라우저 네트워크 요청 수를 줄이기 위해 필요합니다.
Q. Webpack 기반 CRA 프로젝트를 Vite로 마이그레이션할 때 주의할 점은?
require() 코드를 ESM import로 변경하고, process.env 대신 import.meta.env를 써야 합니다. Webpack 전용 플러그인은 Vite 호환 대체제를 별도로 확인해야 합니다.
커뮤니티 하이라이트
“실제로 CRA 기반 프로젝트를 Vite로 바꿨더니 개발 서버 구동이 45초에서 0.8초로 줄었습니다. 팀 전체 개발 경험이 확 달라졌어요.”
“면접에서 '빠르다'만 말하면 부족합니다. ESM 온디맨드 방식이라는 근거와 콜드 스타트 수치를 함께 설명해야 확실히 인상이 달라집니다.”
32명의 개발자가 이 질문에 참여했습니다
관련 면접 질문
앱에서 직접 답변해보세요
매일 3개의 면접 질문에 답변하고,
다른 개발자들의 답변을 비교해보세요.