webPack

 webPack이란? 

 

웹을 개발하다보면 다양한 확장자의 파일을 만들게 됩니다. 이렇게 다양한 소스는 웹 어플리케이션을 무겁게 만듭니다. 

 

통신이 있을 때마다 이 소스들을 로딩하는 작업은 고비용입니다. 

많은 JS 패키지를 사용하다보면 예상하지 못한 충돌로 인해 어플리케이션이 깨지게 될 수도 있습니다.(같은 이름을 변수를 사용하는 등). 

 

이를 해결하기 위해 등장한 도구가 Bundler입니다. 

bundle은 묶는다는 뜻으로 여러개의 파일을 묶어주는 어떠한 정리 방법입니다. 구체적인 기술에는 WebPack, Broserify, Parcel이 있습니다.

 

WebPack은 가장 인기있는 도구입니다.

하나의 JS 파일에 .js뿐만 아니라 .css나 image 파일 등을 모듈에 모두 몰아넣을 수 있습니다. 동시에 성능을 향상 시키기 위해 필요하다면 다시 분리 할 수 있습니다.

특히, WebPack을 둘러싼 방대한 생태계 덕분에 다양한 확장 기능 등이 있다. 따라서 많은 작업들을 자동화 시킬 수 있습니다.

 

즉, WebPack은 여러 개의 파일을 하나의 파일로 묶어주는 개발 자동화 도구입니다.

WebPack는 파일을 묶는 과정에서 여러가지 작업들이 실행 되도록 작업 계획을 세워 주기도 합니다.

sass, typescript, jsx와 같은 언어들을 네이티브 언어로 컴파일 해주거나, 개발 중에 파일이 수정 되었을 경우 자동으로 브라우저의 내용을 리로드 해주는 등의 작업을 통해 생산성을 높일 수 있습니다.

 

---

 

 최소 설정으로 webPack 써보기