📋 모던 자바스크립트 Deep Dive | 49장 Babel과 Webpack

모던 자바스크립트 Deep Dive 도서의 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축을 정리하였습니다.

크롬, 사파리 등의 브라우저에서는 ES6가 98%정도로 대부분 지원한다. 그렇지만 IE 11의 ES6 지원율은 약 11프로고 매년 새롭게 도입되는 ES6 이상의 버전과 제안 단계에 있는 ES 제안 사양은 브라우저에 따라 지원율이 제각각이다.

따라서 최신 사양으로 작성된 코드를 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다.

49.1 Babel

Babel은 최신 사양의 소스코드를 IE와 같은 구형 브라우저에서도 동작하는 ES5사양의 소스 코드로 변환할 수 있다.

49.2 Webpack

Webpack은 의존 관계에 있는 자바스크립ㅌ, CSS, 이미지 등의 리소스들을 하나(또는 여러개)의 파일로 번들링 하는 모듈 번들러다.
웹팩을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다.

Ref

• 이웅모 저, ⌜모던 자바스크립트 Deep Dive⌟, 위키북스