Webpack은 여러개의 파일을 하나의 파일로 묶어주는 **모듈 번들러(Module bundler)**입니다.
모듈(Module)
웹 애플리케이션의 규모가 커지면 커질수록 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 하나의 파일을 모듈(module)이라고 부릅니다.
웹팩에서의 모듈(Module)
자바스크립트(JS) 뿐만아니라 HTML, CSS, 이미지 등 웹을 구성하는 모든 자산(Assets)을 뜻함.
웹팩은 주로 자바스크립트(JS)를 위한 모듈 번들러 이지만 플러그인을 포함하는 경우 HTML, CSS 심지어 이미지와 같은 프런트엔드 자산(Assets)들을 변환할 수 있다.
즉! 웹팩은 의존성 있는 모듈(js, css, html, image, etc)을 취하여 해당 모듈을 대표하는 정적 자산(Assets)을 생성한다.
최근 많은 플랫폼 기업이 고객 경험(User eXperience)을 사업 전략의 핵심이라고 말하고 있습니다. 그리고 4차산업, 디지털마케팅, 비대면플랫폼, 업무자동화와 같은 시대에서는 웹 애플리케이션의 속도는 사용자 경험을 결정 짓는 중요한 역할을 합니다.
글로벌 온라인 쇼핑몰 아마존의 경우 로딩 시간이 0.1초 증가할 때마다 매출이 1%씩 하락 했으며, 구글은 페이지 로딩시간 0.5초 증가로 인해 매출 및 트래픽이 20% 감소했습니다. 이는 곧 로딩시간이 매출과 트래픽으로 직결됨을 증명한 것입니다.
그렇다면 웹 애플리케이션의 로딩속도를 줄이려면 어떻게 해야 할까요? 물론 프런트엔드 백엔드에서 줄일 수 있는 다양한 방법이 있지만, 그 중 대표적인 방법은 클라이언트(브라우저)에서 서버로 요청하는 갯수를 줄이는 것입니다.
즉, 웹팩으로 여러개의 자원! 즉! 모듈을 하나로 묶음으로써, 클라이언트(브라우저)에서 서버로 자원을 요청할 때 갯수를 줄일 수 있는 것입니다. 이렇게 모듈을 하나로 묶는 과정을 번들링이라고 하고요, 번들링을 할 수 있는 도구를 모듈 번들러라고 합니다. 모듈 번들러에는 다양한 종류가 있는데요.
이번시간에는 현재 가장 많이 사용하는 모듈 번들러인 웹팩에 대해 배워 보도록 하겠습니다.