모듈 번들러란? Webpack의 역할은?

모듈 번들러를 이해하기 위해서는 javascript의 빌드 과정을 먼저 이해해야 한다. 

JS 빌드 과정

• transpiling : jsx, es6, tsx 등의 고급 분법을 구형 브라우저들이 이해하지 못해 호환성 문제 존재함. 이 문제를 해결하기 위한 기법으로, 구형 버전의 js 코드로 변환해줌
• bundling: 트랜스파일된 수많은 js파일과 모듈을 하나의 파일로 묶는 번들링 기법 등장
• minifying(압축) : 파일 용량이 커짐에 따라 브라우저 상으로 로드하는 시간이 늘어나는 문제를 해결하기 위한 기법

모듈 번들러

• module : 분리된 코드 조각
• bundling : 묶는다

즉, 분리된 코드 조각을 묶는 다는 의미이다. 의존성이 있는 모듈 코드를 하나(또는 여러개)의 파일로 만들고, 브라우저 환경에서 잘 실행될 수 있도록 가공까지 해주는 도구가 번들러이다.

웹팩(Webpack)

웹팩은 모듈 번들러 중 하나이다. 우리가 es6, react, typescript 등의 고급 문법으로 코드를 작성하면 웹팩은 이를 구형 버전의 하나의 js 코드 파일로 만들어 준다. 

https://webpack.js.org/

webpack