[JS] Babel과 Webpack

📌 ES6 모듈보다 별도의 모듈 로더를 사용하는 이유

• IE를 포함한 구형 브라우저는 ESM(ES6 모듈)을 지원하지 않음
• ESM을 사용하더라도 트랜스파일링이나 번들링이 필요함
• ESM이 아직 지원하지 않는 기능(bar import)이 있으며, 몇 가지 이슈가 존재함

 

📌 Babel

• Babel: ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환해 주는 트랜스파일러

 

📌 Webpack

• Webpack: 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러
• Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없음
• 여러 개의 자바스크립트 파일을 하나로 번들링해 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 하나하나 로드해야 하는 번거로움이 사라짐

 
 

 

참고문헌 및 출처 : 모던 자바스크립트 Deep Dive (이웅모)