Webpack과 Babel 사용하기

김현주·2021년 3월 16일

우아한테크코스

목록 보기

6/6

1. 모듈 번들러

1-1. 모듈 번들러란?

모듈 번들러는 자바스크립트 모듈을 브라우저에서 실행할 수 있는 단일 자바스크립트 파일로 번들링할 때 사용되는 도구이다.
예시) wepback, rollup, fusebox, parcel

1-2. 모듈 번들러는 왜 필요한가?

요즘은 아니더라도, 이전 브라우저들은 모듈 시스템을 지원하지 않았다.
코드의 종송성을 효츌적이게 관리하고, 종속성 순서대로 모듈을 가져올 수 있다.
asset(종속성 순서, image, CSS,,,)을 가져오는데 도움이 된다.

<html>
  <script src="/src/foo.js"></script>
  <script src="/src/bar.js"></script>
  <script src="/src/baz.js"></script>
  <script src="/src/qux.js"></script>
  <script src="/src/quux.js"></script>
</html>

위의 파일로 구성된 어플리케이션을 빌드하려면 script tag를 통해 자바스크립트 파일을 html에 추가하고, 어플리케이션을 시작하기 위해서는 5개의 왕복 요청에 대한 http 요청이 필요하다.

하지만 모듈 번들로를 통해 , 이들을 모두 다음처럼 1개로 결합할 수 있다.

<html>
  <script src="/dist/bundle.js"></script>
</html>

1-3. webpack 방식으로 모듈을 번들하려면

모듈 맵을 사용한다.
함수를 사용하는 각 모듈을 wrapping 한다.(모듈 팩토리 기능)
모듈을 함께 묶는 runtime 코드를 만든다.

2. Webpack

모듈 번들러의 한 종류로, webpack은 의존 관계를 가지는 자바스크립트, CSS, 이미지 등의 리소스를 하나로 묶도록(번들링하도록) 도와준다. webpack의 사용 목적은 번들을 통한 성능 최적화이다.

3. Babel

3-1. Babel이란?

babel이란 자바스크립트 컴파일러로, 입력도 자바스크립트 코드고 출력도 자바스크립트 코드이. 엥? 그러면 왜쓸까요?? 그 이유는 버전때문이. 최신 버전의 자바스크립트 문법을 브라우저가 이해하지 못할 수도 있기 때문데, babel이 브라우저가 이해할 수 있는 문법으로 변환해주는 역할을 한다.

3-2. Babel-polyfill

babel을 사용한다고 해서 자바스크립트의 모든 최신 문법을 브라우저가 이해할 수 있지는 않다. 왜냐하면, babel은 문법을 변환해주는 역할만 하기 때문이다. 따라서, babel-polyfill을 사용한다면, 프로그램이 맨 처음 시작될 때 현재 브라우저에서 지원하지 않는 함수를 찾아서, 각 object의 prototype에 붙여준다. polyfill을 사요하기 위해서는 별도의 작업이 필요하다.

babel은 compile-time에 실행되고, bable-polyfill은 run-time에 실행된다.

출처

김현주

우당탕탕 주니어 프론트엔드 개발자입니다

이전 포스트