Webpack 와 Babel 은 무엇일까?

Webpack ?

  웹페이지에서는 페이지를 보여주기 위해 수 많은 자바스크립트 파일을 서버에 요청하게 되는데 

  이때 서버와 여러번 통신하게 되고 이는 네트워크 성능에 영향을 끼치면서 비효율적인 상황(병목현상)이 발생하게 됩니다.

  이러한 문제를 보완하기 위해 웹팩의 번들링 개념이 나오게 되었다.

 

- 웹팩은 모듈 번들러(Module Bundler) 입니다.

- 여러개의 나누어져 있는 파일들을(모듈) 하나의 파일로 만들어주는 라이브러리

    같은타입(html, css, js) 의 파일을 묶어서 요청/응답을 받음

- 자바스크립트 코드들을 압축하고 최적화 할 수 있기에 로딩 속도를 높일 수 있음

 

웹팩의 주요 속성

1. Entry 

   - 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점 (의존성 그래프 시작점)

   - 웹팩은 엔트리를 통해 필요한 모듈을 로딩하고 하나의 파일로 묶음

2.Output

   -  Entry로 찾은 모듈을 하나로 묶은 결과물을 처리할 위치를 Output에 기록

3. Loader

   - 웹팩은 기본적으로 자바스크립트와 JSON 만 빌드가 가능 

   - 다른 Type (HTML, CSS, IMAGE) 등을 웹팩이 이해하고 처리 가능한 모듈로 변환시켜준다

 4. Plugin

   - Loader은 파일을 해석하고 변환(파일단위 처리)

    - Plugin은 결과물의 형태를 바꾸는 역할 (기본적인 동작에 추가적인 기능 제공)

 

Babel ?

  - 자바스크립트 ES6 문법을 ES5, JSX 등 다른 언어로 분류되는 언어들에 대해서 모든 브라우저에서 동작할 수 있도록

     호환성을 제공(변환) 해주는 트렌스파일러 이다.

  - Babel 을 통해 ES6+ 자바스크립트 코드는 하위 버전 ES5 버전으로 변환되어 다른 부라우저에서 동작할 수 있게끔 도와준다.

  - 이러한 기능으로 React를 일반 브라우저에서 실행시킬 수 있다 

  - ES5에 존재하지 않는 Map, Promise 등은 번역하지 못한다 

 

Polyfill ?

  - 브라우저에서 지원하지 않는 코드를 사용가능한 코드나 플러그인(추가기능) 함수를 의미

  - Babel 지원하지 못하는 Map, Promise 등 과 같은 함수들을 지원해준다.