웹팩이란?
의존성을 분석해 모듈을 번들(여러개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발할 때 수 많은 라이브러리들을 사용하는데 빌드(build)라는 과정을 통해 하나의 파일로 만들어준다. 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러다.
바벨이란?
바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.아직 일부 브라우저에서 지원되지 않은 자바스크립트의 다음버전(ES6,ES7)을 이용할 수 있게 해준다.
다시 정리해보면, 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것을 웹팩이라고 하고 바벨은 ES6를 ES5로 변환시켜준다.
Front-end Developer 👩🏻💻