[개발 지식] Webpack? Bundle? Browserify? Babel?

Webpack 이란?

프로젝트 내부의 수많은 javascript 를 각각 브라우저에 로딩하면 느리고 충돌날수 있기 떄문에 

어떤 파일이 어떤 파일을 바라보고 있는지 의존성을 파악한 뒤 

이런 파일(모듈들)을 의존관계를 반영하여 묶어서 이용할 수 있게 하는 도구

=> Javascript, Css, Image 등의 파일을 자바스크립트 모듈 하나로 로딩해서 사용할 수 있게 해주는

자바스크립트 정적 모듈 번들러

* Entry :  묶어줄 모듈의 시작점

* Loader : Image, Css 등을 웹팩이 알 수 있게 변경하는것

* Output : 하나로 묶을 결과물의 위치와 이름

* Plugin : bundle 된 javascript 결과물들을 처리, Loader 는 파일단위 처리 

 

 

 

Bundler 란? 

묶음이란 뜻처럼 다양한 모듈들을 하나로 묶는것

 

 

 

Browserify 란?

Webpack 과 유사하지만 자바스크립트를 단일 파일로 묶어주는 번들러

설치 : https://browserify.org/

 

 

 

Babel 이란?

브라우저, 그리고 브라우저 버전 마다도 작동되는 코드가 다른데

최대한 개발자들이 최신 문법의 코드를 쓰면 이를 각 브라우저에서 알아들을 수 있게 (구동되게) 코드를 변환하는 도구

 

 

https://sorydory.tistory.com/entry/%EA%B0%9C%EB%B0%9C-%EC%A7%80%EC%8B%9D-babel-%EC%9D%B4%EB%9E%80-babel-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95