[JS] 웹팩(webpack)이란? - 웹팩 알아보기

웹팩이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.

---

웹팩을 사용하는 이유

웹 사이트를 개발하면 HTML, CSS, 스크립트, 이미지 파일 등 많은 리소스 파일이 생겨나 로딩할 때 많은 파일이 다운로드되므로 서버 접속이 많아져 웹 페이지 로딩 속도가 느려진다.

 

웹 사이트가 빠르게 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어난다. 그래서 웹 사이트의 로딩 속도를 높이기 위한 대표적인 방법으로 클라이언트에서 서버로 요청하는 파일들을 압축하고 병합하는 방법을 찾아냈다. 그리고 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장했다.

웹팩은 기본적으로 필요한 자원은 미리 로딩하지 않고 필요할 때 요청하자는 철학을 갖고 있다.

<script src="/js/app.js"></script>
<script src="/js/temp01.js"></script>
<script src="/js/temp02.js"></script>

위 코드는 일반적인 방식으로 자바스크립트 파일을 모듈화 한 것이다. 이렇게 사용하면 여러 개의 파일을 로딩하더라도 같은 스코프를 공유하기 때문에 전역 변수의 충돌이 발생할 수 있다. 그리고 라이브러리 로딩 순서에 따른 이슈와 복잡도에 따른 관리 문제도 생길 수 있다. 

 

이러한 문제를 해결하기 위해 등장한 도구가 바로 번들러(Bundler)다. 번들러란 필요한 의존성을 추적하여 해당하는 의존성들을 그룹핑해주는 도구이다. 그중 가장 많이 사용되는 것이 바로 웹팩(webpack)이다.

• 이렇게 웹 애플리케이션을 구성하는 수많은 파일들을 하나의 파일로 병합 및 압축해 주는 동작을 모듈 번들링이라고 한다.
• 웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다.
• 번들러를 사용하면 여러 개의 파일을 하나로 묶어주기 때문에 서버로 접속하는 부담을 줄여 더 빠른 서비스를 제공할 수 있다.

---

웹팩에서 해결하고자 하는 기존의 문제점

 

자바스크립트 변수 유효 범위 문제

웹팩은 변수 유효 범위의 문제점을 ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결한다.

브라우저별 HTTP 요청 숫자의 제약

TCP 스펙에 따라 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어 있다. HTTP 요청 숫자를 줄이는 것이 웹 애플리케이션의 성능을 높여줄 뿐만 아니라 사용자가 사이트를 조작하는 시간을 앞당겨 줄 수 있다. 웹팩을 이용해 여러 개의 파일을 하나로 합치면 브라우저의 HTTP 요청 숫자 제약을 피할 수 있다.

 

Dynamic Loading & Lazy Loading 미지원

Require.js와 같은 라이브러리를 쓰지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능 했다. 그러나 이젠 웹팩의 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있다.