[WEB] Webpack, Babel, Polyfill

📦 Webpack

Webpack은 JS 기반 모듈 번들러다.

모듈 번들러는 HTML, CSS, JS, Image, Font 등의 파일을 모듈로 간주하여 하나의 파일로 합쳐주는 역할을 한다.

Webpack을 사용함으로써 번들링 기능으로 의존성 있는 파일들을 묶어 크기를 줄이고 페이지 로딩 속도를 향상시킨다.

하나의 페이지에서 여러개의 JS 파일이 필요할 때 반응속도가 느려짐과 동시에 네트워크 병목현상이 일어나는 것을 방지한다.

또한 파일들을 묶어주기 때문에 코드 압축 및 최적화에 용이하다.

📝 Webpack의 구성 요소

Entry - 번들링을 하는 시작점이다. 시작점이 되는 파일을 통해 의존성이 있는 모듈을 전부 찾아내 의존 관계를 통해 dependency graph를 생성한다.

Output - 엔트리를 통해 모든 모듈을 묶어 결과물을 생성한다.

Loader - 웹팩은 모든 파일을 모듈로 간주하는데 이때 웹팩이 JS 밖에 읽지 못한다. 그래서 HTML, CSS, Image, font 등의 모듈을 웹팩이 읽을 수 있게 변환하는 역할을 한다.

Plugin - Output을 통해 나온 결과물에 추가적인 작업을 수행할 때 사용한다.

⚙️ Webpack의 변환 과정

1) Entry로부터 의존성이 있는 모든 모듈 찾기

2) Loader를 통해 Webpack이 모듈을 읽을 수 있게 변환

3) 모듈을 전부 병합하고 압축하여 Output을 통해 결과물 생성

4) 생성된 결과물에 추가 작업을 Plugin을 통해 처리

🔄️ Babel

Babel은 JS 컴파일러다.

Babel은 모든 브라우저가 ES6(ECMAScript 6) ECMAScript 표준 최신 문법을 지원하지 않는 문제를 해결하고자 구 문법인 ES5로 변환하는 역할을 한다.

⚙️ Babel의 동작 과정

1) Parsing - 소스 코드를 분석하여 AST로 변환한다.

2) Transformation - 생성된 AST를 브라우저가 지원하는 구 문법으로 새로운 AST로 변경한다.

3) Code Generation - 새로운 AST를 통하여 새로운 코드를 생성한다.

🪄 Polyfill

Polyfill은 Babel을 통해 ES6 문법을 ES5로 변환을 할 때 ES6 문법 중에 ES5로 대체가 불가능한 경우 사용 가능한 객체로 변환을 한다.

즉, 브라우저에서 지원하지 않는 기능들에 대한 `호환성 작업`을 채우는 역할을 한다.