소프트웨어가 커지면 커질수록 각각의 세분화된 모듈 파일이 늘어나고, 모듈 단위의 파일들을 호출할 때 신경써야하는 각 변수들의 스코프 문제, 그리고 호출할 때 생겨나는 네트워크도 신경써야 한다.
⇒ 이러한 문제를 바탕으로 나온 것이 웹팩의 번들링 개념
번들링(Bundling)이란?
"어떤 것들을 묶는다" 라는 뜻으로, 기능별로 모듈화하나 js 파일들을 묶어주는 것
⇒ 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할(=번들러)
⇒ 서로 연관(의존성)있는 여러 js 파일들을 하나의 번들 파일로 묶어주는 것
(꼭 js파일만이 아닌, 웹팩의 주요 구성요소인 로더(Loader)를 통해 다양한 타입의 파일들도 번들링 가능)
장점
-
이전에는 각 파일들마다 서버에 요청하여 자원을 얻어와야했던 반면, 같은 타입(html, css, js 등)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크 코스트가 줄게 됨
-
webpack 4버전 이상부터는 [development], [production] 두 가지의 mode 지원을 하면서, 특히 production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 한다. (= 상용화된 프로그램을 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경쓰면서 노출 시킬 수 있음)
-
webpack의 주요 구성요소인 로더(Loader)가 일부 브라우저에서 지원이 되지 않는 ES6 형식의 js 파일을 ES5로 변환하여 사용 가능하게 함. 웹 개발 시 크롬 같은 대중적 브라우저만 고려하는 것이 아닌, 다른 브라우저들에 대해서도 커버 가능
