Webpack 소개

Webpack

<aside> 💡 웹 애플리케이션의 구성 자원을 조합하여 하나의 병합된 결과물을 만드는 모듈 번들러

</aside>

Module

• 특정 기능 단위의 코드 뭉치
• 하나의 파일을 하나의 모듈로 볼 수 있다.

// math.js

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

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

export function multiply(a, b) {
	return a * b
}

export function divide(a, b) {
	return b !== 0 ? a / b : NaN
}

math.js는 4가지 기능을 갖는 하나의 모듈이다.

비슷한 성격의 기능들을 뭉쳐 하나의 모듈로 분리시키면, 순수하게 구현하고자 하는 로직에만 집중할 수 있다.

웹팩에서는 웹 애플리케이션을 구성하는 모든 것들을 모듈로 본다. HTML, CSS, Javascript 등 브라우저가 읽을 수 있는 파일뿐만이 아니라, 이미지나 폰트 파일도 하나의 모듈이다.

Module Bundling이 필요한 이유

브라우저가 사용자에게 제공하는 화면은 html 파일로부터 시작된다. 화면을 구성할 요소, 스타일, 행동 등을 모두 html 파일 포함시켜야 하며, 네트워크 통신을 통해 파일을 다운로드 받는다.