(infra) Webpack - Bundling

bundler

초창기의 웹 페이지와 다르게, 상호작용이 많은 웹 서비스들이 생겨나면서 수십 줄의 코드, 수백 개의 JS 파일을 관리하기가 어려워졌다.

❗️ 바뀐 환경으로 생긴 문제들

• 전역 범위를 갖는 수백 개의 자바스크립트 파일의 중복 선언
• 수백 개에 달하는 자바스크리브 파일로 인한 느린 로딩
• 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등)

위 문제들을 해결하기 위해 번들러가 등장했다.

번들러(bundler)란, 웹 어플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 뜻한다.

✨ 번들러를 사용할때 생기는 장점

• 모듈 단위의 코드 작성
• 네트워크 병목 완화 (최적화)
• 웹 개발 작업 자동화

번들러 중에 대중적으로 폭넓게 쓰이는 것이 바로 Webpack이다.

module bundler

특정 기능을 갖는 작은 코드 단위를 뜻하기도 하지만, 웹 어플리케이션을 구성하는 특정 기능의 자원 모두를 모듈이라고 한다. 웹팩은 이런 모듈들을 하나의 JS 파일로 압축, 축소해준다. 수많은 자바스크립트 파일을 하나로 압축했기 때문에, 서버와 여러 번 통신하지 않아도 되서, 페이지 로딩속도도 높아졌다.

transpiler

최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시키는 과정을 transpile이라고 한다.

웹팩은 최신 스펙의 자바스크립트 코드를 브라우저가 읽어들일수 있도록 돕는다. 웹팩 안의 babel이 바로 이 transpiler에 해당한다.

complile과 transfiler는 다르다. compile은 한 언어로 작성된 코드를 다른 언어로 변환시키는 것이다.

웹팩 공식문서 확인해보기

webpack.js.org/api/