웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Image 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 파일(static 한 자원)로 만들어주는 모듈 번들러이다.
모듈
매우 복잡하고 긴 코드를 작성할 때 파일 단위로 분리하여 분리한 파일에서 필요에 따라 클래스나 함수를 불러와서 사용할 수 있는 개념이다.
번들러
필요한 의존성에 대해 정확하게 추적하여 해당하는 의존성들을 그룹핑 해주는 도구이다.
webpack 을 사용하는 이유
서버 사이드 템플릿 시대를 지나 단일 페이지 애플리케이션(Single Page Application, SPA) 개발이 인기를 얻으면서 JavaScript 의 코드량이 기하급수적으로 증가하게 되었다.
이에 따라 코드량은 적게는 수천, 수만 줄에 이르게 되고 JavaScript 코드에서 특정 코드를 찾아 수정하기란 여간 쉬운 일이 아닐 것이다. 때문에 개발 초기 단계에 API 기능과 UI 컴포넌트에 맞도록 JavaScript 코드를 모듈별로 분리하게 되었다.
하지만, 분리해 놓은 여러 개 혹은 수많은 JavaScript 파일을 하나씩 따로 요청하여 로드한다면, 페이지 로딩 시 커다란 속도 저하가 발생할 수 있을 것이다.
그래서 모듈 번들러를 통해 수 많은 JavaScript 파일을 하나의 JS 파일을 번들링하는 작업이 필요하게 되었고, 프로젝트의 성능 향상과 보다 나은 구조, 개발 라이프 사이클의 중요성이 높아졌다.
webpack 이 나타나기 전까지 Gulp, Grunt 와 같은 Web Task Manager 를 사용하여 개발 생산성을 높였다고 한다.
Gulp, Grunt 와 같은 도구들로 개발 라이프 사이클을 줄이는데 많은 도움이 되었고 이후에 모듈의 의존성 관리라는 측면까지 더해진 webpack 이 등장하게 된 것이다.
즉, webpack 은 기존의 Web Task Manage(Gulp, Grunt) 의 기능 + 모듈 의존성 관리까지 할 수 있는 통합 웹 개발 도구라고 할 수 있다. 그리고 요즘 최신 프론트엔드 프레임워크 또는 라이브러리(React, Vue 등)에서 webpack 사용을 권고하고 있기 때문에 webpack 을 자연스레 접하게 되는 상황을 직면할 수 있다.
webpack의 철학
1. 모든 자원은(HTML, CSS, JavaScript, Image 등) 모듈이 될 수 있다.
2. 필요한 자원은 필요한 때에만 로드한다.
Package Bundler(webpack)
의존성, 종속성을 가진 애플리케이션 모듈을 정적인 소스로 재생산
Task Runner(Gulp, Grunt)
반복 가능한 특정 작업을 자동화
Reference
https://webclub.tistory.com/635
