webpack(웹팩)이란 무엇인가?

 

 

---

 

🙋‍♂️ 종종 React, vue와 같은 프레임워크를 이용해 웹을 만들 때, webpack이라는 단어를 많이 보실 수 있을 것입니다.

web-pack이라는 단어를 볼때마다, '음, web-pack은 자주 등장하니 프레임워크를 구성하는 중요한 라이브러리겠지' 라고 생각하며 넘어갔을 수도 있습니다.

하지만 그냥 넘어가는 것보다 간단히 무엇을 하는 라이브러리인지 알고 가는 것 또한 중요하다고 생각합니다.

👉 webpack 이란 무슨 라이브러리일까요?

webpack에 대한 위키백과의 설명을 보면,

웹팩(Webpack 또는 webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다.

웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.

이라고 볼 수 있는데,

즉, webpack은 모듈 번들러 라이브러리입니다.

모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 것을 말합니다.

👉 그렇다면 왜? web-pack과 같은 모듈 번들러를 사용할까요?

웹 클라이언트 부분을 개발 할 때, javascript를 이용해 인터랙티브한 효과를 넣어 줄 수 있으며, 여러가지 프레임워크로 더 편리하게 웹을 만들 수 있습니다.

옛날에는 웹을 구현한다고 해도, js파일들의 수가 많지 않아, 따로 모듈화를 할 필요가 없어지만, 점점 시간이 지나 js파일들의 수가 많아져 중복되는 파일 증가, 코드를 불러오기 위한 네트워킹 비용 증가 등 많은 문제들이 등장하기 시작합니다.

여기서 만들어진 js파일들 중 중복되는 기능들을 하는 파일들끼리 하나의 모듈로 만들어 소스코드의 규모를 줄이고, 재사용성을 좋게 하기위해 모듈화를 합니다.

즉, 모듈 번들러란 여러가지 파일들을 묶어주는 것(bundler), 모듈화를 통해 네트워킹 비용 감소를 해주는 것이라고 생각하면 됩니다.

👉 그렇다면, 왜 많은 프레임워크들은 모듈 번들러로서 Webpack을 사용하고 있을까요?

모듈번들러로 webpack뿐 아니라 Browsify, Grunt, Gulp등 많은 모듈 번들러가 존재하지만,

webpack의 수행능령(Performance)가 뛰어나 많은 프레임워크들이 사용하고 있습니다.

👉 Web-pack의 주요 개념

1. Entry

• 의존성 그래프의 시작점을 웹팩에서는 엔트리(Entry)라고 한다.
• 웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다.

2. Output

• 엔트리에 설정한 자바스크립트 파일을 시작으로 하나로 묶는다.
• 그후 번들된 결과물을 처리할 위치를 output에 기록한다.

3. Loader

• 웹팩은 오직 JavaScript와 Json만 이해할 수 있다.
• 로더는 다른 Type의 파일(img, font, stylesheet 등)을 웹팩이 이해하고 처리 가능한 모듈로 변환 시키는 작업을 한다.

4. Plugin

• 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
• 로더가 변환하는 동안 플러그인은 (bundle optimization, asset management and injection of environment)과 같은 일을 진행할 수 있다.

---

😄 자 이제 webpack의 기능을 알았기 때문에, webpack이라는 단어를 볼 때마다, '아 이것은 모듈번들러 기능을 위한 라이브러리구나'라는 알 수 있을 것입니다.

궁금하신 것이 있으시면 언제든지 댓글 달아주세요!