웹팩 소개

본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다.

 

1. 웹팩

• 모듈 번들러
  • 애플리케이션을 구성하는 자원을 조합해서 병합된 하나의 결과물로 만듦
• 하나의 페이지를 로딩할 때, 느린 네트워크 환경에서 페이지를 구성하는 모듈을 불러오는 것은 많은 시간이 걸림
  • 모듈이 많을 수록 더 걸리게 됨
  • 웹팩을 이용하여 모듈을 번들링하여 해결
• 브라우저를 위한 사전 컴파일러
• JavaScript 만이 아닌, 웹 페이지에 관련된 모든 자원을 위한 도구

 

2. 모듈

• 특정 기능을 갖는 작은 코드 단위
• 모듈이 합쳐서 거대한 모듈이 될 수도 있음

 

웹팩에서의 모듈

• JavaScript 모듈에만 국한되지 않음
• 웹 애플리케이션을 구성하는 모든 자원을 의미
• HTML, CSS, JavaScript, Images, Font

 

3. 웹팩 등장 배경

• 파일 단위의 JavaScript 모듈 관리의 필요성
• 웹 개발 작업 자동화 도구(Web Task Manager)
• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

 

파일 단위의 JavaScript 모듈 관리의 필요성

• JavaScript의 변수 유효 범위는 기본적으로 전역 범위를 가짐
  • 최대한 넓은 변수 범위를 가져, 어디에서나 접근이 편리
• 각 파일에서의 변수 값이 겹쳐서 문제 발생

 

웹 개발 작업 자동화 도구(Web Task Manager)

• HTML, CSS, JS 압축
• 이미지 압축
• CSS 전처리기 변환

 

웹 애플리케이션의 빠른 로딩 속도와 높은 성능

• 좋은 사용자 경험을 위해서 로딩 속도가 빨라야 함
• Web Task Manager로 파일들을 압축하고 병합하는 것의 한계
• 초기 페이지 로딩 속도를 높이기 위해 레이지 로딩(Lazy Loading) 등장
• 웹팩은 필요한 자원을 그 때 그 때 요청

 

4. 웹팩으로 해결하려는 문제 4가지

• JavaScript 변수 유효 범위
• 브라우저별 HTTP 요청 숫자의 제약
  • HTTP 요청 숫자를 줄이는 것이 웹 애플리케이션의 성능을 높이고 사용자가 사이트를 조적하는 시간을 앞당김
• 사용하지 않는 코드의 관리
• Dynamic Loading & Lazy Loading 미지원
  • 웹팩의 Code Splitting 기능을 이용하여 모듈을 원하는 타이밍에 로딩

 

Reference

[인프런]프론트엔드 개발자를 위한 웹팩