최근 채용 공고를 보면 웹팩이 자주 언급됩니다.
웹팩이 뭔지는 알지만, 단순히 빌드만 해주는 도구로 알고 있었는데요.
이번 기회에 웹팩이 어떻게 등장했는지, 그리고 어떻게 사용하는지 알아보겠습니다.
일단 웹팩을 이해하기 위해서는 먼저 모듈에 대해 알아야 합니다.
모듈이란, 자바스크립트 코드를 여러 파일로 나누어 관리하는 방법입니다.
하나의 js 파일에 기능을 분리하여 각각의 js 파일로 나누어 사용하면 코드의 재사용성과 유지보수가 훨씬 쉬워집니다.
CommonJS에서는 require를, ES6에서는 import를 사용하여 모듈을 불러옵니다.
하지만 모듈이 많아지면 각 파일에 대한 네트워크 요청이 늘어나고, 이는 페이지 로딩 시간을 길어지게 만듭니다.
이 문제를 해결하기 위해 모듈을 하나의 파일로 묶어 HTTP 요청 개수를 줄이는 방법이 등장했습니다.