번들링이란 뭘까?
뜻 그대로 "어떤 것들을 묶는다" 이고, 당연하게도 이전에 설명했던 기능별로 모듈화 했던 자바스크립트 파일들을 묶어준다는 뜻이다.
이러한 번들링 기능을 지원하는 번들러 중에서는 RequireJS, Browserify, Rollup, Parcel 등이 있지만, 대표적으로 현재 가장 많이 사용되어지고 있는 것이 [ Webpack ] 이다.
왜 webPack이 가장 인기인걸까? 이유를 찾아보는 웹팩의 우수한 성능 때문이다. 모듈화 작업을 하는 방식에는 CommonJS, AMD, UMD, ES6 모듈 등같은 모듈 명세들이 다양하게 존재합니다. 웹팩은 이 모두를 지원해주죠. 그리고 파일 분할 기능이 있어서 원하는 코드만 따로 분리해서 압축하는 것도 가능합니다. 뿐만 아니라 CSS 로더의 기능과 리액트의 JSX 변환 작업도 해주기 때문에 모던 자바스크립트 개발을 할 때 상당히 유용합니다.
번들링의 장점
장점
이전에는 각 파일들마다 서버에 요청하여 자원을 얻어와야했던 반면, 같은 타입(html, css, js 등)의 파일을 묶어서 요청/응답을 받기 때문에 네트워크 코스트가 줄게 됨
webpack 4버전 이상부터는 [development], [production] 두 가지의 mode 지원을 하면서, 특히 production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 한다. (= 상용화된 프로그램을 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경쓰면서 노출 시킬 수 있음)
webpack의 주요 구성요소인 로더(Loader)가 일부 브라우저에서 지원이 되지 않는 ES6 형식의 js 파일을 ES5로 변환하여 사용 가능하게 함. 웹 개발 시 크롬 같은 대중적 브라우저만 고려하는 것이 아닌, 다른 브라우저들에 대해서도 커버 가능
