Babel, Webpack 왜 쓰나?

ES6(ECMA2015)에서 처음 소개된 import, export, const 같은 기능들은 ES6을 지원하지 않는 브라우저에서는 실행되지 않는다.

ES6 문법으로 만들어진 소스 코드를 ES5 등 다른 형태로 변환을 시켜주는 트랜스 파일러 중에 한 아이가 Babel이다.

import, export는 require, module.exports로 변환이 되는데 이 둘은 또 브라우저가 해석하지 못한다.

그래서 모듈을 가져오는 것들을 한 파일로 만들어서 require 같은 키워드를 사용하지 않아도 되도록 한 파일로 묶어줄 필요가 있다.

그럴 때 쓰는 것이 번들러라고 하고 번들러 중에는 webpack, rollup 등이 있다.

ES6에서 ES5로 전환할 수 없는 기능은 변환하지 않고 그대로 놔두는데 이게 구형 브라우저에서 인식할 수 없는 문제가 있다. 그 간극을 메우기 위헤 pollyfill을 사용한다. webpack 설정과 @babel/polyfill 을 install 해서 사용한다.

 

entry: ['@babel/polyfill', './src/js/main.js'],

 

webpack은 CSS도 js파일에  뭉쳐서 넣을 수 있는데 규모가 커지면 오히려 불편할 수 있다. 묶은걸 따로 분리시키기 위해서 mini-css-extract-plugin 을 사용하면 된다.