쉽게 이해하자, 웹팩(Webpack)이란? - 모듈 번들러(Module Bundler)

프론트엔드 개발, 즉 자바스크립트(JavaScript) 학습을 하다보면 무조건 마주하게 되는 친구가 있습니다.

바로 웹팩(Webpack)입니다.

 

실제로 사용해보지 않으면 어떤 개념인지 잘 와닿지 않을 수 있습니다. 저도 그랬고요.

오늘은 웹팩(Webpack)에 대해서 최대한 쉽게 설명해보도록 하겠습니다.

 

 

웹팩이란 무엇인가?

아마도 웹팩을 조금 찾아봤다면 지겹도록 본 이미지일 것입니다.

 

일단 개념 한번 간단하게 설명하고 가겠습니다. 웹팩(Webpack)은 여러 모듈 그러니까 이미지의 왼쪽에 보이는 파일들을 하나로 번들(Bundle), 즉 꾸러미로 만들어 주는 역할을 합니다. 이렇게 번들링(Bundling)된 파일은 웹 서버에서 정적 파일로 제공됩니다. 그래서 웹팩은 모듈 번들러(Module Bundler)라고 불리죠.

 

---

웹팩으로 굳이 번들링 할 필요 있어요?

이런 생각이 들텐데요. 맞습니다. 사실 웹팩으로 파일을 묶는 것은 필수사항은 아닙니다.

 

과거의 인터넷, 브라우저의 상황에서는 굳이 필요가 없었습니다. 왜냐하면 과거에는 웹 페이지의 구조나 디자인 구현에 있어 자바스크립트(JavaScript)의 역할이 극히 제한적이었기 때문이죠.

 

하지만 현대 웹 애플리케이션은 상황이 많이 달라졌습니다. 웹 개발 복잡성도 증가하면서 자바스크립트의 역할이 커졌고, 이로 인해 자바스크립트의 코드나 크기가 커짐에 따라 코드의 관리, 유지보수, 성능 개선 등이 요구되었죠.

 

그래서 웹팩이 이러한 문제를 해결하기 위해 탄생하게 되었습니다. 쉽게 설명하자면, 현재는 많이 사용하지 않지만 예전에 우리는 특정 파일들을 친구나 다른 사람에게 전달하기 위해 그냥 전달하지 않았습니다. 그 파일들을 하나로 '압축'하여 전달했죠.

 

그렇게 하는 이유야 다양하지만 가장 큰 이유는 '파일 크기가 상당히 축소 되고', '하나의 압축 파일'이 되어 전달하기 용이하기 때문이죠.

 

 

웹팩도 마찬가지입니다. 웹 세상에서 자바스크립트, HTML, CSS, 이미지 등이 포함된 개발 코드를 보여줄 때 크기가 많이 줄어든, 가벼운 상태여야 좀 더 신속하게 유저들에게 마주할 수 있겠죠?

 

---

 

대표적으로 웹팩은 다음과 같은 장점을 가질 수 있습니다.

1. 다양한 모듈 형식을 지원하여, 웹 페이지 로딩 속도를 개선할 수 있습니다.
2. 자바스크립트 파일 이외에도 CSS, 이미지 등 다양한 파일을 로드할 수 있어, 더욱 풍부한 웹 페이지를 제작할 수 있습니다(로더).
3. 번들링 결과물에 대한 후처리 작업을 수행하여, 최적화 작업 등을 쉽게 수행할 수 있습니다(플러그인).
4.  코드를 적절히 분할하여, 초기 로딩 속도를 개선할 수 있습니다. 또한, 필요한 코드만 로딩하므로, 사용자 경험을 향상시킬 수 있습니다(코드 스플리팅. Code Splitting).
5. 브라우저를 새로고침하지 않고 변경 사항을 즉시 반영할 수 있어, 개발 효율성을 높일 수 있습니다(HMR. Hot Module Replacement).
6. 파일이 변경될 때마다 자동으로 번들링해주므로, 개발자가 번거로운 작업을 줄일 수 있습니다.
7. 브라우저뿐만 아니라 Node.js, Electron 등 다양한 환경에서도 사용할 수 있어, 다양한 프로젝트에 적용 가능합니다.

 

---

 

웹팩의 로더(Loader)와 플러그인(Plugin)

또한 웹팩은 로더(Loader)와 플러그인(Plugin)을 활용할 수 있는데요. 이것들을 통해 코드를 최적화하고 관리할 수 있습니다.

 

로더(Loader)

로더를 이용하여 자바스크립트 파일 이외에 CSS나 이미지 등의 다양한 파일을 로드할 수 있는데요. CSS나 이미지 파일 같은 것들은 일반적으로 자바스크립트 파일과는 다른 형식으로 작성되어 있습니다. 이러한 파일들도 웹팩에서 모듈로 처리하기 위해 해당 파일들을 자바스크립트 코드로 변환해야 합니다. 이때 로더가 필요한 것이죠. 로더를 통해 이런 파일들을 자바스크립트 코드로 변환하는 작업을 수행합니다. 

 

이러한 로더들은 웹팩에서 모듈 번들링 과정에서 필요한 파일들을 처리하여, 최종적으로 하나의 번들 파일로 묶어서 웹 페이지에서 로딩할 수 있도록 합니다. 따라서, 웹팩에서 로더를 사용함으로써, 모듈 번들링 과정에서 필요한 다양한 파일들을 관리할 수 있고, 웹 페이지 로딩 속도를 개선할 수 있습니다.

 

플러그인(Plugin)

플러그인은 로더보다 좀 더 광범위한 역할을 하는데요. 번들링 과정에서 파일을 해석하거나 변환하는 기능보다는 번들링 결과물에 대한 후처리를 도와주는 역할을 합니다.

 

예를 들어 제가 실무에서 사용했던 fork-ts-checker-webpack-plugin 이라는 플러그인이 있습니다. 이 친구는 TypeScript에서 웹팩으로 빌드할 때, 타입 체크(Type Checking)를 별도의 프로세스에서 수행해줘 빌드 시간을 단축 시켜주는 웹팩 플러그인입니다. 실시간으로 Type Checking을 해준다고 생각하시면 됩니다.

 

정리하면 플러그인은 모듈 번들링 과정에서 파일을 좀 더 디테일하게 컨트롤하고, 번들링 결과물에 대한 후처리를 할 수 있도록 도와줍니다.

 

---

 

이상으로 웹팩(Webpack)에 대한 개념과 로더, 플러그인 및 장점을 알아보았습니다.

다음에는 웹팩하면 항상 같이 따라오는 바벨(Babel)에 대해서도 소개해보도록 하겠습니다.