번들러

번들러(Bundler)는 모듈로 나뉜 소스 코드를 의존 관계(Dependency Graph)를 따라 묶고 변환해, 브라우저가 적은 요청으로 받을 수 있는 결과물로 만드는 빌드 도구다.

• 왜 필요한가: ESM을 그대로 쓰면 파일마다 요청이 생긴다. 번들러는 이를 몇 개 파일로 묶고, 압축(minify)하고, 트리 셰이킹·코드 스플리팅과 동적 임포트을 적용한다
• Webpack의 기본 개념
  • entry: 의존 그래프를 그리기 시작할 파일
  • output: 결과물 위치와 이름
  • loader: JS(JavaScript)가 아닌 파일(TS, CSS(Cascading Style Sheets) 등)을 변환하는 규칙. 예: ts-loader
  • plugin: 빌드 전체에 끼어드는 확장. 예: 결과 폴더 비우기
  • mode: development·production에 따라 최적화 수준이 달라진다
• 도구들의 위치(2026 기준)
  • Webpack: 설정이 유연하고 생태계가 가장 크다
  • Rollup: ESM(ECMAScript Modules) 중심으로 설계돼 트리 셰이킹이 정확하다. 라이브러리 빌드에 많이 쓴다
  • Vite: 개발 서버는 브라우저의 네이티브 ESM으로 빠르게 띄우고, 빌드는 Rollup 계열로 한다. 환경별 설정은 Vite mode와 env 파일
  • Turbopack: Next.js 16부터 dev와 build의 기본 번들러다(Next.js 16 변경점)
• 번들러 대부분은 TS 타입을 지우기만 하고 검사하지는 않는다. 그래서 타입 검사는 tsc --noEmit으로 따로 돌린다

여러 패키지를 한 저장소에서 빌드하는 구성은 모노레포·Turborepo 참고.

책: 9장. 코드는 어떻게 실행될까: 토큰, AST, 바이트코드