Bundling과 웹팩(Webpack)

Bundling(번들링) 이란

웹 페이지의 고도화로 인해 다양한 파일들 사이의 상호작용이 발생하고 대규모 웹 서비스들이 탄생하게 되면서, 무수한 코드라인을 관리하기 힘들어졌다. 대표적인 문제점들로 다음과 같은 사항들이 있을 수 있다.

1. 전역 범위를 갖는 수많은 JS파일 내 변수의 중복선이 발생할 수 있다.

2. 수 백개에 달하는 JS 파일로 인한 늦은 로딩

3. 수동적인 개발 루틴

 

이러한 문제들을 해결해줄 수 있는 것이 바로 'Bundler'이다.

 

Bundler는 연관성이 높은 자원을 모듈로 묶어주는 도구를 의미하고 아래와 같은 장점을 기대할 수 있다.

1. 모듈 단위의 코드 작성이 가능

2. 네트워크 병목현상 완화 가능 (최적화, 네트워크 코스트 절감)

3. 웹 개발 작업 자동화

 

웹팩 (Webpack)

웹팩(Webpack)은 프론트엔드 프레임워크에서 가장 대중적인 모듈 번들러이다.

웹팩을 사용하면서 대표적으로 두 가지 면에서 장점을 누릴 수 있다.

 

먼저. 웹 애플리케이션을 구성하는 HTML, CSS, Image, Font 등 모든 구성 요소를 '모듈'이라고 하고 수십 개의 모듈을 하나의 모듈로, 축소, 압축시킨다.

서버는 이 압축파일을 사용하게 되고, 기존의 수많은 파일을 핸들링해야했던 것에 비해 네트워크 사용량을 줄이고, 로딩 속도는 증가되었다.

 

다음으로는 모듈 개발이 가능하다. 같은 형식의 파일들의 양이 이전에 비해서 많아졌기 때문에 문서 내부 변수가 다른 파일에서 중복 선언되었는지 일일이 파악하기가 힘들다. 이를 개선하기 위해서 웹팩을 활용해 라이브러리와 같은 모듈을 통한 개발이 가능해졌다.

 

웹팩을 사용하면서 바벨(babel)이라는 transpiler를 같이 사용하게 되는데,

바벨은 ES6, ES7과 같이 자바스크립트 스펙의 등장으로 인해, 옛날 브라우저에서 신규 문법을 사용할 수 있게끔 신스펙의 JS를 ES5와 같은 하위 스펙의 언어로 변환시켜주는 기능을 한다.

 

바벨을 활용하게 되면서 웹팩은 에버그린 브라우저(Evergreen Browser: 최신 스펙의 자바스크립트가 호환 가능한 브라우)를 유지할 수 있게 도움을 준다.