webpack
하나의 소스로 모든 브라우저에서 보여주는 게 웹의 특장점이지만 브라우저는 여전히 파일 단위 모듈을 잘 모른다. 그래서 번들링 과정을 통해 하나의 파일로 묶어줘야하는데 이것을 웹팩이 한다.
⇒ webpack : 개발할 때 수 많은 라이브러리들을 사용하게 되는데 웹팩은 빌드(build)(=의존성을 분석) 과정을 통해 이런 수 많은 모듈들을 하나의 파일로 묶어준다. = 번들링
- 번들링 bundling : 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 하는 것.
- 엔트리는 의존성 그래프의 시작점을 의미한다. 엔트리 파일을 의존하는 파일은 없고, 엔트리가 A를 의존하고, A가 다시 B, C를 의존하고.. 하는 식으로 모듈이 연결된다. 이때 웹팩은 이미지, 폰트, 스타일시트 역시 모듈로 관리한다.
- 아웃풋
- 엔트리에 설정한 자바스크립트 파일을 시작으로, 의존되어 있는 모듈을 하나로 묶어서 내보낸다. 번들된 결과물이 나오는 위치는 output 키에 기록한다.
babel
ES6나 ES7(최신표준)를 브라우저가 이해하지 못하기때문에 이들을 ES5로 바꿔주는 과정이 필요하다. 이 과정을 해주는 자바스크립트 컴파일러가 바벨이다. 개발자는 ES6 + 버전으로 개발할 수 있으니 생산성은 향상된다.
⇒ babel : 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.
⇒ 따라서 웹팩과 바벨 둘 중 무엇을 사용해야할지 고민하는게 아니라 결국 둘 다 써야한다.
[참고]https://juneyr.dev/2019-02-20/webpack-babel
'개발몰입과정 개념스터디 > 2차' 카테고리의 다른 글
React / Vue / Angular 기술별 차이점과 장단점 (0) | 2022.02.04 |
---|---|
CSS 레이아웃 (Float, Position, Display, Box Model) (0) | 2022.02.04 |
Prettier & ESLint (0) | 2022.02.04 |
쿠키와 세션 (0) | 2022.02.04 |
[HTTP] HTTP vs TCP vs IP (0) | 2022.02.04 |