번들링과 웹팩

번들링(Bundling) 이란 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할을 한다.

 

현대의 프로젝트들의 파일들이 점점 많아지고 크기가 커져감에 따라 JavaScript 파일들을 여러개 나누어 관리하게 되었고, 여러개를 각각 다운받는 속도보다 하나로 뭉쳐서 다운받는 것이 훨씬  빠르기 때문에 시작 되었습니다.

 

프론트엔드를 위한 많은 번들러가 있는데 그중에서 제일 많이 사용되어지는 웹팩(Webpack) 에 대해서 알아보겠습니다.

Webpack

https://webpack.js.org/

webpack

 

Webpack 이란 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러 입니다. 모듈 번들러란 HTML,CSS,Javascript 등의 자원을 각각의 모듈로 정의하고 이를 하나의 묶음으로 번들링(=빌드) 해주는 도구입니다.

 

빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업입니다. 번들링은 파일을 묶는 작업을 의미하며 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업입니다.

 

웹팩은 왜 필요 할까요?🧐

웹팩이 필요한 가장 큰 이유는 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 입니다. 

유저가 웹사이트를 접근할때 3초 이내에 화면이 랜더링 되지 않는다면 대다수의 유저가 더이상 기다리지 않고 대부분이 해당 웹에서 이탈하게됩니다.

이를 해결할수 있는 방법이 바로 웹팩입니다.

 

웹팩을 사용한다면 같은 타입의 파일들을 묶어서 요청 및 응답을 받을 수 있기 때문에 빠른 로딩이 가능합니다.

 

Webpack loader 를 사용하면 일부 브라우저에서 지원하지않는 JavaScript ES6 의 문법들을 ES5로 변환해주는 babal-loader 를 사용할수 있습니다

 

Webpack4 버전 이상부터는 Develoment, Production 두 가지의 모드를 지원합니다. 여기서 Production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 합니다