Webpack 이란?
웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러이다.
번들러는 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 한다.
과거에 모듈 번들러가 없을 때는 HTML에 모든 스크립트 파일을 불러왔어야 했다.
<html>
<body>
<script src="./index.js"/>
<script src="./app.js"/>
<script src="./src/Card.js"/>
...
</body>
</html>위 방식처럼 스크립트 파일을 모두 불러왔어야 했다.
시간이 지나 ES2015부터 모듈 시스템이 등장했다.
exports로 모듈을 내보내고, require로 모듈을 불러와서 사용할 수 있다.
그러면서 아래와 같은 장점들을 얻을 수 있다.
- 전역변수와 지역변수를 분리하여 모듈이 독립적인 실행 영역을 갖게 된다.
- script 태그로 파일을 가져오는 것이 아니라 필요한 함수나 변수를 가져올 수 있다.
- exports와 require를 이용하여 의존성 관리도 편해졌다.
그리고 ES6부터 import, export 구문이 나오면서
원하는 변수, 함수만 들고오기 쉬워졌다.
이 때부터 script 태그에 type="module"으로 설정할 수 있게 되면서
모듈형태의 자바스크립트를 HTML에서 불러올 수 있게 됐다.
<html>
<body>
<script src="./index.js" type="module" />
</body>
</html>하지만 위와같은 것들은 아직 모든 브라우저에서 지원을 하지 않기 때문에 모든 파일들을 하나의 모듈로 모아줄 소프트웨어가 필요했고, 그래서 나온것이 웹팩이다.
즉, 웹팩은 하나의 진입점으로 부터 의존하고 있는 파일들을 전부 모아서 하나의 파일로 만들어준다.
바벨(Babel) 이란?
바벨(Babel)은 자바스크립트 트랜스컴파일러 입니다.
트랜스컴파일러는 변환 전에도 자바스크립트, 변환 후에도 자바스크립트 이다.
정확히는 ES6문법을 ES5문법으로 변환시키는 것이다.
ESNext(ES6 이후 버전)은 개발자들에게 많은 편의성을 가져다 줬지만 하나의 문제가 있었다.
바로 브라우저 호환성인데, 몇몇의 브라우저들은 ESNext 자바스크립트를 지원하지 않는다.
그래서 최신 문법을 사용하는 많은 프로젝트를 대부분의 브라우저에 호환시키기 위해
바벨을 이용해 호환이 되는 자바스크립트 버전으로 낮춘 다음 사용하는 것이다.
