WebPack
웹팩은 웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구입니다.
번들링의 개념은 여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미합니다.
또, html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 합니다.
쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 합니다.
번들링을 함으로써 파일은 하나로 합쳐지고 네트워킹 요청횟수는 줄어들게 됩니다. 그리고 중복된 소스코드도 최소화하고 모듈 개념을 사용하기 때문에 글로벌이 오염되지도 않습니다.
그리고 웹팩을 사용하면 자바스크립트 간의 종속성 뿐만 아니라 자바스크립트 내에서 필요한 css나 img와 같은 파일도 번들링해서 하나의 파일로 합쳐주기 때문에 네트워크 요청을 최소화 시킬 수 있습니다.
사용 이유를 한번 더 정리하면,
- 이전에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함됩니다. 연관 되어 있는 자바스크립트 종속성 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
- 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리기 때문에 여러 파일을 하나의 파일로 번들링 해줄때 사용합니다.
Babel
바벨은 자바스크립트 컴파일러로 자바스크립트의 최신 버전, 문법들을 하위 호환성을 위해 변환해주는 역할을 합니다.
예를 들면, 많이 사용하는 typescript도 babel을 통해 javascript로 변환되어 컴파일 되어야하고 최신 문법들을 지원하는 브라우저가 있는 반면 호환이 되지 않는 브라우저 또는 구버전용 어플리케이션을 지원하려면 필수적이다.
참고 사이트
Webpack이란?
Babel이란 무엇인가
효율적이고 효과적이게