Webpack이란 무엇이며 왜 사용할까요?

웹팩이란?

최신 프론트엔드 프레임워크에서 갖아 많이 사용되는 모듈 번들러(Module Bundler)이다.

모듈 번들러란? 

- 웹 애플리케이션을 구성하는 자원 (HTML, CSS, JS 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

 

모듈이란?

프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 자바스크립트로 치면 아래오 같은 코드가  모듈이다

//math.js

function sum(a, b) {
	return a + b;
}

function substract(a, b) {
	return a - b;
}

function pi = 3.14;

export { sum, substract, pi }

위의 math.js 파일은 아래와 같이 3가지 기능을 갖고 있는 모듈이다.

1. 두 숫자의 합을 구하는 sum이란 함수

2. 두 숫자의 차를 구하는 substract이란 함수

3. 원주율을 갖는 pi 상수

 

이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다

 

웹팩이서의 모듈

 웹팩에서 지칭하는 모듈이라는 개념은  위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 장원을 의미한다. 웹 애플리케이션을 제작하려면 HTML, CSS, JS 등 많은 파일들이 필요하다. 이 파일 하나하나가 모듈이다.

 

모듈 번들링이란? 

아래 그림과 같이 웹 애플리케이션을 구성하는 몇 십, 몇 백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.

빌드, 번들링, 변환 이 세 단어는 모두 같은 의미다.

 

모듈 번들러의 장점

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.

2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.

3. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다.

 

웹팩은 의존성을 가진 모든 파일들을 압축하여 하나의 자바스크립트 파일을 만들어 준다. 

 

참고자료

https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EB%AA%A8%EB%93%88-%EB%B2%88%EB%93%A4%EB%A7%81%EC%9D%B4%EB%9E%80

웹팩이란? | 웹팩 핸드북