Webpack , Babel ?

Webpack?

웹팩(Webpack 또는 webpack)은 오픈 자바 스크립트(JS) 모듈 번들러이다. 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프런트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.

 

웹팩은 의존성을 취한 다음 의존성 그래프를 만듦으로써 웹 개발자들이 웹 애플리케이션 개발 목적을 위해 모듈 방식의 접근을 사용할 수 있게 도와준다. 명령 줄을 통해서 사용할 수 있으며, "webpack.config.js"이라는 이름의 구성 파일을 사용하여 구성할 수 있다. 이 파일을 사용하면 프로젝트를 위해 로더, 플러그인 등을 정의할 수 있다. (웹팩은 로더를 통해 상당한 확장이 가능하므로 개발자들이 파일을 함께 번들링 할 때 수행하기 원하는 사용자 지정 작업을 작성할 수 있다.) createapp.dev라는 이름의 도구는 이 구성 파일의 생성 과정을 단순하게 만들어 준다.

 

즉 Javascript의 Application의 Static Module Bundler이다.

ko.wikipedia.org/wiki/%EC%9B%B9%ED%8C%A9

웹팩 - 위키백과, 우리 모두의 백과사전

---

웹팩은 왜 등장하게 되었을까?

Webapck defendency graph

1. 규모가 큰 JS 파일들을 관리하기 위해서.
2. 여러 개의 파일을 브라우저에서 호출하면 되잖아? -> 네트워크 비용이 증가 , 비효율적인 파일 충돌로 인한 오류  가능성 높아짐.
3. 다른  모듈보다 높은 퍼포먼스를  보임.

---

Babel?

Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러입니다.

en.wikipedia.org/wiki/Babel_(transcompiler)

Babel (transcompiler) - Wikipedia

• babel은 자바스크립트의 컴파일러. -> 트랜스파일러
• 인터프리터 언어인 자바스크립트인데 ? (인터프리터 언어 -> 코드를 바로 실행시키는 언어 또는 환경 )
• babel은 자바스크립트로 결과물을 만들어 줌.

---

바벨을 왜 사용할까?

• 최신 버전의 자바스크립트 문법을 브라우저가 인식을 하지 못함.
• 많은 사람들이 새로운 브라우저를 사용하지 않고 기존의 브라우저 (크롬, IE...)를 사용하고 있음.

polyfill?

- 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미.

- 브라우저에 호환되지 않은 기능들을 채워 넣음.

 

babel-polyfill

babel을 사용한다고  해서 최신 함수를  사용할 수 있는 건 아니다. babel은 문법을 바꿔주는 역할만을 수행할 뿐이다.

polyfill은 프로그램이 시작될 시에 필요한 기능을 채워 넣는 것이다. 즉 babel은 컴파일 시에 실행이 되고 

babel-polyfill은 런타임에 실행이 된다.