webpack vs babel

webpack

하나의 소스로 모든 브라우저에서 보여주는 게 웹의 특장점이지만 브라우저는 여전히 파일 단위 모듈을 잘 모른다. 그래서 번들링 과정을 통해 하나의 파일로 묶어줘야하는데 이것을 웹팩이 한다.

⇒ webpack : 개발할 때 수 많은 라이브러리들을 사용하게 되는데 웹팩은 빌드(build)(=의존성을 분석) 과정을 통해 이런 수 많은 모듈들을 하나의 파일로 묶어준다. = 번들링

• 번들링 bundling : 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 하는 것.

1. 엔트리는 의존성 그래프의 시작점을 의미한다. 엔트리 파일을 의존하는 파일은 없고, 엔트리가 A를 의존하고, A가 다시 B, C를 의존하고.. 하는 식으로 모듈이 연결된다. 이때 웹팩은 이미지, 폰트, 스타일시트 역시 모듈로 관리한다.
2. 아웃풋
3. 엔트리에 설정한 자바스크립트 파일을 시작으로, 의존되어 있는 모듈을 하나로 묶어서 내보낸다. 번들된 결과물이 나오는 위치는 output 키에 기록한다.

---

babel

ES6나 ES7(최신표준)를 브라우저가 이해하지 못하기때문에 이들을 ES5로 바꿔주는 과정이 필요하다. 이 과정을 해주는 자바스크립트 컴파일러가 바벨이다. 개발자는 ES6 + 버전으로 개발할 수 있으니 생산성은 향상된다.

⇒ babel : 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.

---

⇒ 따라서 웹팩과 바벨 둘 중 무엇을 사용해야할지 고민하는게 아니라 결국 둘 다 써야한다.

 

 

 

---

[참고]https://juneyr.dev/2019-02-20/webpack-babel

 

https://devlog.jwgo.kr/2018/12/03/webpack-babel-react/