[JavaScript] Webpack, babel, Polyfill 이란?

Webpack, babel, Polyfill이란?

---

Webpack, babel, Polyfill의 차이

Webpack이란?

Webpack은 모듈을 번들시키는 역할을 한다.

번들러의 종류

1.Webpack
2.Broserify
3.Parcel

이 중 Webpack은 가장 대중적으로 사용되는 모듈 번들러이다.

Webpack은 의존관계에 있는 자바스크립트, css, 이미지 등의 리소스들을 하나(또는 여러개)의 파일로 번들링한다.
동시에 성능을 향상시키기 위해서 필요하다면 다시 분리도 가능하다.

Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없다.

그리고 여러개의 자바스크립트 파일을 하나로 번들링하므로 HTML파일에서 script 태그로 여러개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.

---

Babel이란?

바벨은 자바스크립트 컴파일러로서 새로운 방식의 자바스크립트로 개발 후,
배포할 때 예전방식의 자바스크립트로 변환해서 배포하기위해 사용한다.

예를 들어, 특정 브라우저에서는 ES6에서의 화살표 함수나 ES7의 지수연산자를 지원하지 않을 수 있다.
이럴 때 babel을 사용한다면 ES5 사양으로 변환할 수 있다.

이처럼 Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 특정 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링) 할 수 있다.

---

Polyfill이란?

Babel을 사용하여 ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링 해도 브라우저가 지원하지 않은 코드가 남아 있을 수 있다.
예를 들면, ES6에서 추가된 Promise, Opject.assign, Array.from 등은 ES5 사양으로 트랜스파일링해도 ES5 사양에 대체할 기능이 없기 때문에
트랜스 파일링되지 못하고 그대로 남게된다.

이러한 경우에 Polyfill은 바벨로서 해결되지 않는 이슈를 해결할 수 있다.