📍 소개
프로그래밍 관점에서 모듈은 '특정 기능을 갖는 최소 코드 단위'를 의미합니다.
웹팩은 '모듈 번들러'입니다.
웹팩은 애플리케이션을 구성하는 각 자원(HTML/CSS/Javascript/images 등)을 하나의 모듈로 간주합니다.
이러한 각 모듈을 병합해 하나의 파일로 관리하는 것입니다.
📍 등장 배경
파일 단위 관리의 필요성
기본적으로 자바스크립트 변수의 유효 범위는 전역 범위를 갖습니다.
하지만 이러한 특징은 복잡한 애플리케이션을 개발할 때 문제를 야기합니다.
여러 자바스크립트 파일을 로딩하는 경우 변수의 이름이 충돌할 수 있습니다.
이는 의도하지 않은 결과를 유발해 불필요한 디버깅을 초래합니다.
따라서 파일 단위로 자바스크립트 모듈을 관리하고자 하는 시도가 발생한 것입니다.
웹팩은 이러한 각각의 파일을 하나로 묶는 역할을 합니다.
웹 개발 작업 자동화 도구의 필요성
HTML/CSS/Javascript/이미지 압축, CSS 전처리기 변환 등은 웹 서비스를 배포할 때 수행하는 작업들입니다.
웹팩은 (각각의 모듈을 관리하는 동시에) 이러한 작업들을 자동화합니다.
웹 애플리케이션의 빠른 로딩 속도와 높은 성능
일반적으로 유저들은 5초 이내로 웹 사이트가 표시되지 않으면 이탈한다고 합니다.
따라서 웹 서비스를 개발할 때 빠른 로딩 속도와 높은 성능이 요구됩니다.
모듈을 번들링하면 발생하는 네트워크 요청(request) 횟수가 상대적으로 적어져 웹 애플리케이션 속도가 빨라진다는 장점이 있습니다.
참고로 웹팩은 필요한 자원은 필요할 때 로딩해야 한다는 철학을 갖고 있다고 합니다.
📍 웹팩의 기능
변수 유효범위 문제 해결
앞서 살펴본 변수 유효 범위 문제를 웹팩은 ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결합니다.
HTTP 요청 횟수의 제약 문제 해결
TCP 스펙에 따라 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP 요청 횟수는 정해져 있습니다.
예를 들면 크롬/파이어 폭스는 기본적으로 한 번에 6번의 HTTP 요청을 보낼 수 있습니다.
웹팩을 이용해 파일을 하나로 합치면 브라우저 별 HTTP 요청 횟수 제약을 피할 수 있습니다.
결과적으로 HTTP 요청 횟수를 줄임으로써 웹 애플리케이션의 성능을 높일 수 있게 됩니다.
클라이언트에서 서버로 HTTP 요청을 보내기 위해서는 사전에 TCP/IP가 연결되어 있어야 합니다.
사용하지 않는 코드 관리
웹팩은 트리 쉐이킹을 통해 사용하지 않는 라이브러리를 관리합니다.
Code Splitting
웹팩의 code splitting 기능을 이용하면 원하는 모듈을 원하는 타이밍에 로딩할 수 있습니다.
웹팩을 사용하면 Lazy loading 및 Dynamic loading이 가능합니다.
