개요

처음 React 개발 공부를 하면서 Create-React-App 을 이용해서 프로젝트를 생성했었다. 그리고 프로젝트의 라이브러리 충돌 등의 문제들로 Google 에 검색해보면 가끔씩 다음과 같은 말이 있었다.

“이 라이브러리는 Webpack x.x.x 버전에서 build 되지 않는 버그가 있습니다.”

“해당 프로젝트의 Webpack 버전을 먼저 확인 후 라이브러리 업데이트를 하시길 바랍니다.”

‘내 프로젝트에는 이런걸 설치 한 적이 없는데? ‘ 라고 생각했지만, .nodemodules 폴더에 찾아보니 Webpack 이 설치되어 있는 것을 확인했었다.

React 프로젝트 내부의 /node_modules 폴더 내부

그때 처음으로 Webpack 의 존재를 알았고, CRA 를 이용한 React 프로젝트 생성 시 Webpack 이 설치 된다는 점을 확인했었다. 그리고 Webpack 은 번들러 역할을 가진 라이브러리 중 하나라는 것을 알게 되었다.

항상 프로젝트 생성 후 자동으로 라이브러리 관리 및 Build 시 코드 최적화 역할을 담당해주던 번들러에 대해서 이번 기회를 통해 공부했던 내용을 공유하려 한다.

Bundler 가 뭐지?

번들링 툴은 여러 소스 코드 파일과 리소스를 하나로 묶어 하나의 파일로 만들어주는 도구입니다. 이를 통해 웹 애플리케이션의 성능을 향상시키고, 다양한 모듈 시스템을 사용하는 프로젝트에서 모듈을 관리할 수 있습니다.

인터넷이 등장하고 처음에는 웹 페이지와 서비스들의 규모가 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고 해당 서비스를 유지하는데 큰 무리가 없었다.

하지만 인터넷이 발달하면서, 적게는 수십만 줄에서 많게는 수백만 줄의 코드로 이루어진 대규모 웹 서비스들이 생겨나기 시작했다. 하나의 웹 서비스에서 수십 수백개의 자바스크립트 파일을 다루면서 하나 둘씩 발생되는 문제들에 여기저기서 곡소리(?)가 나오기 시작했다.

webpack 번들러 설명

어떤게 좋아지는데