[webpack] 2) 번들링(Bundling) 개념 및 사용 이유

[이전 글] https://humanwater.tistory.com/1

[webpack] 1) 웹팩의 정의, 모듈(Module)

하지만, 위에서 설명한 모듈화 프로그래밍도 100% 효율성이 좋다고만은 볼 수 없다. 소프트웨어가 커지면 커질 수록 각각의 세분화된 모듈 파일이 늘어나고, 이러한 모듈 단위의 파일들을 호출 할때 신경써야하는 각 변수들의 스코프 문제, 그리고 호출할 때 생겨나는 네트워크 쪽의 코스트도 신경써야 한다.그래서 이러한 문제들을 바탕으로 나온 것이 웹팩(Webpack)의 번들링(bundling) 개념이다.

 

 이전 글에서는 웹팩의 정의를 설명하면서, 가장 핵심 요소인 모듈에 대한 설명을 하였다. 이어서 이번 글에서는, 무작위로 늘어나게되는 모듈화 프로그래밍의 한계점을 인식한 상태에서 이를 효율적으로 해결할 수 있는 방법인 번들링(Bundling)에 대한 내용을 정리해보겠다.

 

 

번들링(Bundling)

 뜻 그대로 "어떤 것들을 묶는다" 이고, 당연하게도 이전에 설명했던 기능별로 모듈화 했던 자바스크립트 파일들을 묶어준다는 뜻이다.

 이러한 번들링 기능을 지원하는 번들러 중에서는 RequireJS, Browserify, Rollup, Parcel 등이 있지만, 대표적으로 현재 가장 많이 사용되어지고 있는 것이 [ Webpack ] 이다.

 

그리고 이러한 웹팩(Webpack)과 같은 번들러의 주 역할은 서로 연관(의존성) 있는 여러 JS파일(모듈)들을 하나의 번들(Bundle) 파일로 묶어주는 역할을 한다.

* 꼭 JS파일만 가능한 것이 아니다. 웹팩의 주요 구성요소인 로더(Loader)를 통해 다양한 타입의 파일들도 번들링이 가능하다.) 

 

 

 

이렇게 번들링 된 파일을 가짐으로써 얻는 가장 큰 장점은,

 

 

1) 이전에 각 파일들마다 서버에 요청을 하여 자원을 얻어와야했던 반면, 같은 타입(html, css, js 등)의 파일을 묶어서 요청/응답을 받기 때문에 네트웍 코스트가 줄게 된다.

 

 

2) Webpack 4버전 이상부터는 [ development ], [ production ] 이 두가지의 mode 지원을 하면서, 특히 production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 한다. 한마디로 상용화 된 프로그램을 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경쓰면서 노출시킬 수 있다는 점이다.

[참고] https://ui.toast.com/fe-guide/ko_BUNDLER/

 

 

3) Webpack의 주요 구성 요소 중 하나인 로더(Loder)가 일부 브라우저에서 지원이 되지 않는 ES6 형식의 자바스크립트 파일을 ES5로 변환하여 사용가능하게 한다. 웹 개발을 진행할 때 크롬과 같은 대중적인 브라우저만 고려하는 것이 아닌, 다른 모든 브라우저에 대해서도 커버가 가능하다는 뜻이다.

 

이 외에도 장점이 더 있을 수 있겠지만, 가장 크게 느껴지는 부분을 적어보았다.

 

 

 

다음 장에는, 웹팩의 구성요소를 정의하는 파일인 * webpack.config.js 와 이 내부에 선언되는 4가지 요소인 [Entry], [Output], [Loader], [Plugin] 에 대해서 알아보도록 하겠다.