[Etc] - WebPack (웹팩)

   프론트엔드 개발을 하다 보면 웹팩(Webpack)이라는 도구를 마주하게 된다. 하지만 처음 접하는 사람들에게는 "대체 이게 왜 필요한 거지?"라는 의문이 들 수 있다. 이번 글에서는 웹팩이 무엇인지, 왜 사용하는지, 번들링 전략등에 대하여 알아보겠다.

---

웹팩(WebPack)이란?

  웹팩은 다양한 자원(파일)들을 번들(bundle)로 묶어주는 모듈 번들러(module bundler)이다. 즉, 여러 개의 파일(JS, CSS, 이미지 등)을 하나로 합쳐서 최적화하는 역할을 한다.

단순히 파일을 하나로 묶는 것뿐만 아니라 코드 스플리팅, 트리 셰이킹, 로더 등을 활용하여 프로젝트의 성능을 최적화할 수도 있다.

 

웹팩 로고인데 생긴것만 봐서는 번들보다는 컨테이너 같이 생겼다.

 

---

웹팩을 사용해야하는 이유

 웹 개발이 발전하면서 프로젝트의 규모도 커졌고, 사용하는 파일과 라이브러리도 많아졌다. 만약 웹팩 없이 프로젝트를 운영한다면 다음과 같은 문제가 생길 수 있다.

• 수많은 개별 파일 요청 → 네트워크 비용 증가로 로딩 속도 저하
• ES6 모듈 지원 부족 → 브라우저 호환성을 고려해야 함
• JS, CSS, 이미지 파일 등 개별 처리의 어려움 → 파일 최적화가 힘듦

웹팩을 사용하면 이러한 문제를 해결하면서 효율적인 개발 환경을 구축할 수 있다.

 

실제 페이지에서 호출되는 과정으로 비교해보면 아래와 같다.

 

📌  웹팩을 사용하지 않은 경우 (일반적인 개발 환경)

1. 브라우저가 HTML 파일을 읽는다.
2. HTML 파일에서 여러 개의 JS, CSS, 이미지 파일을 개별적으로 요청한다.
3. 각각의 파일이 서버에서 브라우저로 전송된다.
4. 브라우저는 각 파일을 개별적으로 다운로드하여 로딩한다.
5. 네트워크 요청이 많아져 페이지 로딩 속도가 느려진다.
6. 모듈 시스템이 없으면 JS 파일 간의 종속성을 수동으로 관리해야 한다.

🛠️ 문제점
- 파일이 많을수록 로딩 속도가 느려진다.
- JS, CSS, 이미지 파일을 개별적으로 관리해야 하므로 유지보수가 어렵다.
- 파일 간의 의존성을 수동으로 처리해야 한다.

 

📌  웹팩을 사용했을 경우 (최적화된 개발 환경)

1. 개발자가 여러 개의 JS, CSS, 이미지 파일을 작성한다.
2. 웹팩이 이 모든 파일을 번들링하여 하나의 bundle.js 파일을 생성한다.
3. HTML 파일에서 bundle.js 한 개만 로드한다.
4. 브라우저는 단 한 번의 요청만으로 모든 리소스를 받아온다.
5. 코드가 최적화되면서 필요 없는 코드(Dead Code)도 자동으로 제거된다.
6. 로딩 속도가 향상되고, 유지보수도 쉬워진다.

🛠️ 장점
- 파일 요청 수를 줄일 수 있어 로딩 속도가 향상된다.
- JS, CSS, 이미지 등의 파일을 자동으로 최적화(JS 번들링 & 압축)하여 성능을 개선할 수 있다.
- 파일 간의 의존성을 수동으로 처리해야 한다. 

 

즉, 웹팩을 사용하면 전체적인 성능 향상을 기대할 수 있으며, 의존성 문제에 대한 고민도 줄어들게 된다. 

---

번들링 전략

 단순히 번들링을 한다고 성능 향상을 기대하기는 어렵다.

각 서비스와 상황에 맞는 번들링 전략을 적용해야 성능 향상을 기대할 수 있는데, 대표적인 전략으로는 ‘코드 스플리팅’이 있다.

 

 코드 스플리팅 전략

엔트리 포인트를 여러 개로 나누고, 필요한 코드만 먼저 로드하고 나머지는 나중에 불러올 수 있도록 분리한다.

 

 

1️⃣ 기본적인 웹팩의 엔트리 포인트 (기본 설정)

 

  보통 웹팩을 사용하면 하나의 진입점(entry point)을 기준으로 번들링 한다.

예를 들어, 웹팩 설정에서 엔트리 파일이 index.js 하나라면, 전체 애플리케이션 코드가 한 개의 번들에 포함된다.

module.exports = {
	entry: './src/index.js' // 하나의 엔트리 파일 사용
	output: {
		filename: 'bundle.js',
		path: __dirname + '/dist'
	}
};

 

  위와 같이 하나의 번들로 묶으면, 초기 로딩 속도가 느려질 수 있다는 큰 단점이 발생한다. 규모가 작은 서비스의 경우 로딩 속도의 차이가 크게 없을 수 있지만, 대형 서비스의 경우 로딩 속도를 쉽게 체감할 수 있을 정도로 차이가 크다. 자연스럽게 이는 UX에 악영향을 끼치게 된다.

 

2️⃣ 엔트리 포인트를 여러 개로 분리하기

  웹팩에서는 엔트리 포인트를 여러 개로 설정하여 필요한 번들만 로드할 수 있는 기능을 제공한다. 이 방법을 사용하면 페이지별로 필요한 코드만 로딩하게 되어 초기 로딩 속도를 줄이고 캐싱 효율을 높일 수 있다.

module.exports = {
	entry: {
		main: './src/index.js',
		admin: './src/admin.js'
	},
	output: {
		filename: '[name].bundle.js', // entry 이름에 맞게 번들 파일 생성
		path: __dirname + '/dist'
	}
};

 

예시)

   - main.bundle.js → index.js에서 사용하는 코드만 포함한다.

   - admin.bundle.js → admin.js에서 필요한 코드만 포함한다.

 

엔트리 포인트를 나누게 되면, 위와 같이 페이지별로 필요한 번들만 로딩할 수 있다.