Module Bundler

Bundle your assets, scripts, images, styles.

— Webpack 공식 홈페이지 대표 슬로건

설정만 하루 종일 붙잡고 있다가 끝내 포기하고 보일러플레이트를 복사하게 만드는 주범이자, 분명 잘 작동하던 빌드가 버전을 올리는 순간 시뻘건 경고와 함께 폭사하는 공포의 상자. ~~Vite가 나오고 나서는 Webpack 설정 파일을 쳐다도 안 보는 개발자들이 수두룩하다.(...)~~

1. 개요

현대 프론트엔드 웹 애플리케이션 개발 환경에서 분할된 수많은 JavaScript 모듈, CSS 파일, 이미지 등의 정적 자원(Assets)들을 분석하여 최적화된 소수의 파일로 병합 및 압축해 주는 빌드 도구. 모듈 시스템이 미비했던 과거 브라우저 환경의 한계를 극복하고, 수천 개의 파일 요청으로 인한 네트워크 오버헤드를 비약적으로 감소시키는 역할을 수행한다. 현대 웹 개발에서 Webpack, Rollup, Parcel, 그리고 최근 급부상한 Vite 등이 대표적인 모듈 번들러로 꼽힌다.

2. 모듈 번들러의 탄생 배경과 필요성

초창기 웹 자바스크립트는 단순한 효과용 스크립트에 불과해 하나의 HTML 파일에 <script> 태그 몇 개를 얹는 것으로 충분했다. 하지만 웹 앱이 거대해지며 파일이 수백 개로 쪼개졌고, 변수명이 겹치는 전역 스코프 오염 문제와 수많은 네트워크 요청으로 브라우저가 기절하는 병목 현상이 발생했다. 자바스크립트 커뮤니티는 이 문제를 풀기 위해 모듈 표준(CommonJS, AMD, ESM)을 만들었고, 이를 브라우저가 이해할 수 있도록 컴파일하고 하나의 큰 덩어리(Bundle)로 합쳐주는 모듈 번들러를 탄생시켰다.¹ 번들러는 코드 내 import, require 구문을 추적하여 의존성 그래프(Dependency Graph)를 그리고, 사용하지 않는 코드를 잘라내는 트리 쉐이킹(Tree Shaking) 기법 등을 통해 자바스크립트 크기를 다이어트시켜 준다.

3. 웹팩(Webpack)의 지배와 비트(Vite)의 초고속 세대교체

오랫동안 프론트엔드 생태계는 웹팩(Webpack)의 독점 무대였다. 로더(Loader)와 플러그인(Plugin)을 통한 무한한 확장성 덕에 업계 표준으로 자리 잡았으나, 대규모 프로젝트에서 개발 서버를 켤 때 빌드 시간이 수 분씩 걸려 개발자들의 담배 타임을 늘려주는 주범이 되기도 했다. 이에 분노한 생태계는 자바스크립트가 아닌 Rust나 Go 같은 네이티브 컴파일 언어(Rust 기반 SWC, Go 기반 esbuild)를 번들러 내부에 결합하기 시작했다. 특히 브라우저의 Native ESM을 적극 활용하는 Vite가 등장하면서, 로컬 개발 서버 기동 속도가 0.1초 만에 완료되는 기적을 보여주며 웹팩의 아성을 무섭게 위협하고 있다.

4. 관련 밈 및 드립

4.1. Webpack 설정만 하다가 하루가 다 갔다

신규 프로젝트를 생성할 때 webpack.config.js 파일의 entry, output, module rules, resolve, plugins 등의 수백 줄에 달하는 프로퍼티들을 직접 한 땀 한 땀 코딩하다가 정신이 피폐해진 개발자들의 원망 섞인 한탄. 결국 사내 시니어 개발자가 미리 만들어 둔 '마법의 웹팩 템플릿'을 그대로 훔쳐 와 붙여넣고 조용히 눈감는 것이 주니어들의 일상 다반사였다.

4.2. Vite(비테)의 한글 발음 논란

프랑스어로 '빠르다'라는 뜻의 Vite는 원래 '비트' 혹은 '빝'으로 발음하는 것이 공식 명칭이다. 그러나 한국인 개발자들은 정직하게 '바이트' 또는 '비테'라고 멋대로 읽는 경우가 매우 흔하다. 세미나나 회의실에서 누군가 '바이트 개발 서버 켜세요'라고 했을 때 '비트인데요?'라며 엄근진하게 훈수를 두다 분위기가 싸해지는 키보드 워리어들의 슬픈 이야기가 자주 들려온다.(...)

5. 여담

Tree Shaking의 유래: 번들링 과정에서 쓰지 않는 코드를 털어내는 트리 쉐이킹은 문자 그대로 '나무를 흔들어 죽은 잎사귀들을 떨어뜨리는 행위'에서 착안한 용어다. 번들러가 코드 흐름을 정적 분석해 한 번도 호출되지 않은 함수들을 빌드 결과물에서 완전히 제외함으로써 브라우저 다운로드 대역폭을 아껴준다.
CSS와 이미지도 번들링 대상이다: 자바스크립트 번들러라고 해서 JS 파일만 다루는 것이 아니다. 웹팩은 로더(Loader)를 통해 CSS나 PNG 이미지 파일까지 전부 자바스크립트 문자열 또는 Base64 주소로 변환하여 하나의 번들 파일 속에 통째로 우겨넣는 무시무시한 능력을 자랑한다.
Turbopack과 차세대 번들러: 웹팩의 창시자 토비아스 코퍼스는 메타를 떠나 Vercel에 합류한 뒤, Rust 언어로 무장한 초고속 웹팩 후속작인 'Turbopack'을 개발하고 있다. 바야흐로 번들러 생태계는 Rust를 다룰 줄 아는 엔진 엔지니어들의 전쟁터로 진화 중이다.

6. 관련 문서

초창기에는 모듈 번들러 없이 자바스크립트 파일들을 무식하게 위에서 아래로 이어 붙이는 concat 스크립트를 수동으로 작성하기도 했으며, 이는 순서가 아주 조금만 어긋나도 undefined 참조 에러를 뿜으며 주말 당직을 확정 짓게 만드는 재앙이었다. ↩