잠깐, 바벨과 웹팩은 무엇인가?

Webpack 웹팩
https://webpack.js.org/

오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.(위키백과)

 

→ 여러 종류의 파일을 의존하는 순서대로 합쳐서 하나 또는 여러개의 파일로 만들어내는 도구(Bundling)

→ 자바스크립트 파일을 여러개 만들었을 때 하나의 파일로 만들어주는 기능도 있음(*물론, 여러개로 분리 가능함)

 

 

Babel 바벨
https://babeljs.io/

Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 변환기입니다.(위키백과)

 

→ 자바스크립트 변환도구

→ 새로운 문법을 지원하지 않을 때, 이전 버전 자바스크립트로 변환시켜줌(ES6 → ES5)