[JS] 웹팩이란?

웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.

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

모듈이란?
모듈은 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.

const sum = (a, b) => {
	return a + b
}

const substract = (a, b) => {
	return a - b
}

export {sum, substract}

이 코드의 경우 하나의 모듈에 sum과 substract 2개의 기능을 가지고 있다.

왜 웹팩이 필요할까?

1. 모듈 시스템 지원 
   • 웹팩은 CMJ, AMD, ESM 등 다양한 모듈 시스템을 지원하여 모듈화된 개발을 가능하게 한다.
2. 다양한 자산 처리
   • 자바스크립트뿐만 아니라 CSS, 이미지, 폰트 등 다양한 자산을 처리하여 번들에 포함시킬 수 있다.
3. 코드 분할
   • 번들 크기를 줄이고 초기 로딩 속도를 향상시키기 위해 코드를 분할할 수 있다.
4. 로더와 플러그인 
   • 로더를 통해 다양한 파일 형식을 처리하고, 플러그인을 통해 웹팩의 기능을 확장할 수 있다.

웹팩을 쓰면 좋은점?

1. 모듈화
   • 코드를 관리하기 쉽고 재사용성이 높아진다.
2. 성능 향상
   • 코드 분할, 트리 쉐이킹 등을 통해 번들 크기를 줄이고 로딩 속도를 향상시킬 수 있다.
3. 유연성
   • 다양한 로더와 플러그인을 통해 커스터마이징이 가능하다.

웹팩의 단점?

1. 학습 곡선
   • 설정이 복잡하고 다양한 개념에 대한 이해가 필요
2. 빌드 시간
   • 프로젝트가 커질수록 빌드 시간이 길어질 수 있다.

1.