Babel and Webpack

: 웹팩이란 간단하게 말해서 번들러이다. 그리고 번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 의미합니다(browserify, parcel, rollup 등도 이에 해당함).

웹팩(Webpack)은 프론트엔드 프레임워크에서 가장 대중적인 '모듈 번들러'이다.

• module bundler ? 특정 기능을 갖는 작은 코드 단위 를 모듈이라고 하는 것처럼, 웹 애플리케이션을 구성하는 특정 기능의 자원 모두를 모듈이라고 부릅니다. 비단 Javascript뿐만 아니라 HTML, CSS, images, Font 등이 그 모듈이고, 수십 개의 JS 파일을 하나의 JS 파일로 압축, 축소하여 만듭니다. 수많은 자바스크립트 파일을 하나로 압축했기 때문에, 서버와 여러 번 통신하지 않아도 되고, 해당 코드들을 압축하고 최적화했기 때문에 로딩 속도도 높아지게 됩니다. 두 번째로, 현대의 자바스크립트는 모듈 단위의 개발이 가능하지만 과거엔 모듈 단위의 개발이 불가피했습니다. 모든 자바스크립트 파일의 변수를 확인하여 중복 선언을 스스로 피했어야 했습니다. 하지만 크고 복잡한 서비스의 경우 거의 불가능했기에 여러 라이브러리가 등장했습니다. 웹팩은 이러한 모듈 단위의 개발을 지원합니다. 결론적인 모듈 번들러의 기능
  • 모듈 단위의 개발을 가능하게 해준다
  • 수많은 모듈을 압축, 한번에 묶어줌으로써 서버와의 통신 회수를 줄여주고, 로딩 속도를 높여준다.
  • 에버그린(evergreen) 브라우저가 될 수 있도록 돕는다(최신 스펙의 자바스크립트 코드가 호환이 가능한 브라우저). 이를 위해 babel이라는 트랜스 파일러를 내장하고 있다.
• 웹팩의 정의 및 장점 : 의존 관계에 있는 자바스크립트, css, image 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러이다. webpack을 쓰면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없게 된다. 또한, 여러개의 js파일을 하나로 번들링하므로 html파일에서 script태그를 여러개 쓸 필요도 없게 된다.

Babel 은 webpack 안에 있는 자바스크립트 트랜스파일러(transpiler)이다.

transpile ? : 최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시키는 과정이 필요합니다. 이 과정을 transpile이라고 한다.

[1,2,3].map(n=>n**n);

위와 같이 ES6의 화살표 함수 + ES7의 지수 연산자가 쓰여진 코드가 있다고 해보자. 이는 IE와 같은 구형 브라우저에서는 지원하지 않을 수 있는 코드다. 이에 따라 이를 트랜스파일링 해야지만 웹 접근성 측면을 해결할 수 있다.

    "use strict";
    [1,2,3].map(function(n) {
    	return Math.pow(n,n);
    });

babel을 쓰면 이렇게 트랜스파일링이 된다. 그러나, Promise, Array.from의 from 등 ES5에서 대체될만한 것이 없는 경우 어떻게할까?. 그 경우에는 '@babel-polyfill'을 써서 해결한다. 그러나 현재 babel polyfill이 deprecated 됐다고 하니 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안한다.
** 폴리필(Polyfill) :  브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드