Webpack, Babel, Polyfill

1. Webpack

웹팩은 JavaScript 애플리케이션을 위한 정적 모듈 번들러

웹팩은 애플리케이션을 구성하는 다양한 모듈(JavaScript, CSS, 이미지 등)들을 의존성 그래프로 분석하고 이를 하나의 번들 파일로 묶어주고, 이렇게 번들링된 파일은 브라우저에서 로드되어 실행될 수 있습니다.

웹팩은 다양한 로더(loader)와 플러그인(plugins)을 제공하여 코드 변환, 번들 최적화, 자동화 등의 기능을 제공하며, 주로 모던 JavaScript 개발에서 모듈 시스템을 사용하고 코드 번들링을 필요로 할 때 웹팩을 사용합니다.

 

2. Babel

바벨은 자바스크립트의 최신 문법을 구버전 브라우저에서도 동작할 수 있도록 변환해주는 도구

최신 버전의 자바스크립트 문법(ECMAScript)은 모든 브라우저에서 지원되지 않을 수 있습니다.

바벨은 이러한 최신 문법을 구버전의 자바스크립트로 변환해주어 모든 브라우저에서 호환성을 확보할 수 있도록 도와주고, 주로 웹팩과 함께 사용되며, 웹팩의 로더(loader) 중 하나로 바벨 로더를 설정하여 사용합니다.

 

3. Polyfill

폴리필은 구버전 브라우저에서 웹 표준에 포함되지 않은 기능을 지원할 수 있도록 도와주는 코드 조각입니다.

폴리필은 브라우저에 존재하지 않는 메서드나 객체를 구현하고, 해당 기능을 사용하고자 하는 코드 앞에 삽입하여 사용합니다.

폴리필은 주로 바벨과 함께 사용되며, 바벨은 최신 문법을 구버전 자바스크립트로 변환해주지만, 새로 추가된 API나 메서드는 변환해주지 않습니다.

폴리필은 이러한 추가된 기능을 지원하기 위해 사용됩니다.

 

요약

1. 웹팩은 모듈 번들링 도구로서 애플리케이션의 의존성을 관리하고 번들 파일을 생성

2. 바벨은 최신 자바스크립트 문법을 구버전 브라우저에서 호환 가능한 형태로 변환해주는 도구

3. 폴리필은 구버전 브라우저에서 지원하지 않는 기능을 지원하기 위해 사용되는 코드 조각

이 세 가지 도구는 모던 자바스크립트 개발에서 필수적인 요소로 사용됩니다.