webpack이란?
- 현대 Javascript Application의 Static Module Bundler
- Webpack이 실행된다면 Dependencies Graph를 통해 필요한 형태의 하나 또는 여러개의 Bundle로 생성
- 예)
- webpack이 없으면 모듈 사용이 불가능 ㅠㅠ
Bundle이란?
- 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package
- 각각의 모듈들에 대해 의존성 관계를 파악하여 하나 또는 여러개의 그룹으로 볼 수 있습니다.
Webpack을 사용해야하는 이유는?
- 규모가 있는 System에서는 많은 Javascript가 존재하게 되고, 이 많은 Javascript 파일을 하나의 파일로 관리하기엔 어려움이 있기때문
- 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
- 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
- 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.
Babel이란?
"최신 ES6버전을 구 버전인 ES5로 변환해준다."
- 최신 업데이트 중에 ES6버전은 큰 업데이트 부분을 차지한다. 크게 일어난 만큼 ES6를 지원해주는 브라우저가 있다. 그 중에서는 지금까지는 크롬, 사파이, 파이어폭스(98%)와 같은 에버그린 브라우저는 최신 업데이트 버전으로 지원을 해준다.
B.U.T 인터넷 익스플로러11을 사용하는 비율도 11% 정도나 되는데 지원을 하지 않는다. 그러므로 아직 구 버전을 사용하는 ES5버전으로 바꿔주어야 한다.
참고링크
열심히 굽고 있어요🍞