🌐
웹개발
번들러
Bundler
여러 파일을 하나로 합치는 도구. Webpack, Vite, esbuild 등. 프론트엔드 빌드의 핵심.
상세 설명
번들러(Bundler)는 여러 JavaScript 파일과 모듈을 하나(또는 여러 개)의 파일로 합치는 도구입니다. 의존성 해결, 코드 변환, 최적화를 수행합니다.
- Webpack: 가장 널리 사용, 풍부한 플러그인 생태계
- Vite: 개발 시 ES 모듈, 프로덕션 시 Rollup
- esbuild: Go로 작성된 초고속 번들러
- Turbopack: Rust 기반, Next.js 14+ 기본 탑재
코드 예제
# Vite 프로젝트 생성
npm create vite@latest my-app
# 개발 서버 (번들링 없이 ES 모듈)
npm run dev
# 프로덕션 빌드 (번들링 + 최적화)
npm run build
# → dist/assets/index-[hash].js
실무 대화 예시
신입
"번들러가 왜 필요한가요? import/export로 모듈 나누면 되잖아요."
시니어
"브라우저가 수백 개 파일 각각 요청하면 느려. 번들러가 합쳐서 최적화하고, Tree Shaking으로 안 쓰는 코드 제거도 해."