Webpack

웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러입니다.

번들러란 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 합니다.

모듈 번들러가 없을 시기에는 HTML에 모든 스크립트 파일을 불러와야 했습니다.

그러다가 ES2015 부터 모듈 시스템이 등장했습니다.

exports로 모듈을 내보내고, require로 모듈을 불러와서 사용할 수 있었습니다.

모듈 시스템의 등장으로 아래와 같은 장점들을 얻을 수 있었습니다.

- 전역변수와 지역변수를 분리하여 모듈이 독립적인 실행 영역을 갖게 됩니다.
- script 태그로 파일을 가져오는 것이 아니라 필요한 함수나 변수를 가져올 수 있습니다.
- exports와 require를 이용하여 의존성 관리도 편해졌습니다.

그리고 ES6 부터 import, export 구문이 나오면서 원하는 변수, 함수만 가져오기 쉬워졌습니다.

또한 script 태그에 type=”module” 으로 설정할 수 있게 되면서 모듈 형태의 자바스크립트를 HTML에서 불러올 수 있게 되었습니다.

이제 index.js 하나의 모듈만 불러오면 index.js에서 import 하고 있는 다른 모듈들을 자동으로 불러올 수 있게 되었습니다.

하지만 위와 같은 것들을 아직 모든 브라우저에서 지원 하지 않기 때문에 모든 파일들을 하나의 모듈로 모아줄 소프트웨어가 필요했고, 그것이 바로 웹팩 입니다.

Babel

바벨(Babel)은 자바스크립트 트랜스컴파일러 입니다.

트랜스컴파일러는 변환 전, 후 모두 자바스크립트입니다.

정확히는 최신 버전(ES6 이상)의 자바스크립트에서 구형 버전(ES5 이하)의 자바스크립트로 변환시키는 것입니다.

ESNext(ES6 이후 버전)은 개발자들에게 많은 편의성을 가져다 주었지만, 브라우저의 호환성 문제가 있다.

따라서 최신 문법을 사용하는 많은 프로젝트를 대부분의 브라우저에서 호환시키기 위해 바벨을 이용하여 버전을 변환시키는 것입니다.