[Javascript] 웹팩, 바벨, 폴리필

웹팩(Webpack)

웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러를 말한다. 번들링이란 기능별로 나뉘어 있는 여러 파일을 하나로 합치는 것을 의미한다. 웹팩은 나뉘어 있는 파일들을 하나로 묶어 한번에 다운받을 수 있도록 해줌으로써 웹 애플리케이션의 빠른 로딩을 가능하게 한다.

 

웹팩의 네 가지 속성

• Entry 속성은 웹팩을 실행할 대상 파일. 진입점
• Output 속성은 웹팩의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의
• Loader 속성은 CSS, 이미지와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가하는 속성. 로더는 오른쪽에서 왼쪽 순으로 적용
• Plugin 속성은 웹팩으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용하는 속성. 웹팩 변환 과정 전반에 대한 제어권을 갖고 있음

 

Bundling이 무엇이며 왜 필요한가?

기능에 따라 나뉘어진 여러 파일들과 npm을 통해 다운받은 다양한 모듈을 한데 묶어주는 것을 번들링이라고 한다. 웹팩이 대표적인 번들러의 예시다. 번들링을 하면 개별 파일들을 일일이 요청하지 않고 html, css, js 등의 파일을 묶어서 요청하기 때문에 네트워크 비용을 줄일 수 있다.

 

바벨(Babel)

바벨은 자바스크립트 트랜스파일러다. 모든 브라우저가 ES6의 기능을 제공하지 않기 때문에 ES6로 작성된 코드를 ES5 코드로 변환해 주는 기능을 한다.

📌 ES6 새로 도입된 주요 특징들
- let, const 키워드
- 화살표 함수
- symbol 타입
- 스프레드 연산자(…)
- 템플릿 리터럴(`)
- 프로미스
- for … of 반복문
- Map, Set

 

폴리필(polyfill)

폴리필은 이전 브라우저에서 기본적으로 지원하지 않는 최신 기능을 제공하는 데 필요한 코드다. ES5 문법으로 트랜스파일할 수 있는 코드는 트랜스파일되지만, ES5에 아예 존재하지 않아서 트랜스파일할 수 없는 경우에는 폴리필을 통해서 브라우저가 이해할 수 있는 코드로 바꿔 줘야 한다.

📌 ES5의 global namespace(window)에 존재하지 않는 것은 컴파일 하지 못 한다.
- 새로운 객체 (Promise, IntersectionObserver, Set, Map …)
- 기존 객체의 새로운 메서드 (Array.prototype.includes, Object.entries …)
- 새로운 함수 (fetch)

 

---

참고 자료

https://velog.io/@ye-ji/HTML-DOM-JavaScript-예상-면접-질문-리스트

https://joshua1988.github.io/webpack-guide/

https://happysisyphe.tistory.com/49