Webpack ?

• 모듈 번들러
  여러 개의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것

• 여러 개의 파일 중 종속성이 존재하는 파일을 하나로 묶어 패키징

Webpack을 사용하는 이유

• 번들링을 함으로써 파일이 하나로 합쳐지고 네트워킹 요청 횟수는 줄어들게 된다.

• 중복된 소스코드를 최소화하고 모듈 개념이 도입되기 때문에 글로벌이 오염되지 않는다.

• 자바스크립트 간 종속성뿐만 아니라 자바스크립트 내에서 필요한 css나 이미지와 같은 리소스들도 같은 파일로 번들링하여 네트워크 요청을 최소화할 수 있다.

Babel ?

• ES6버전을 ES5로 변환해준다.
• ES6을 지원하지 않는 브라우저가 있기 때문에 개발 환경을 설정할 때, webpack과 babel을 기본으로 설정해야한다.
• 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할