본문 바로가기

개념정리

프론트엔드의 WebPack

 

여러가지의 모듈 (왼쪽) 들을 하나의 번들(like 꾸러미)로 만들어주는 역할.

이렇게 번들링 된 파일은 웹 서버에 정적 파일로 제공된다. 

그래서 웹팩이 Module Bundler라고 불린다.

 

웹팩의 장점

1. 다양한 모듈 형식을 지원하여  웹 페이징 로딩 속도를 개선

2. JS파일 이외에도 그림의 왼쪽에 보이는 다양한 파일(의존성을 가진)을 로드할 수 있어 풍부한 웹 페이지 제작 가능

3. 번들링 결과물에 대한 후처리 작업을 수행하여 최적화 작업을 쉽게 수행할 수 있다. 

4. 코드를 적절히 분할하여(Code Splitting)초기 로딩  속도를 개선할 수 있다.

5. 브라우저를 새로고침 하지 않고 변경 사항을 즉시 반영하여 개발 효율성을 높일 수  있다.

6. 파일이 변경될 때마다 자동으로 번들링 해주므로 개발자의 수고가 줄어든다.

7. 브라우저 뿐만 아니라  Node.js, Electrom 등 다양한 환경에서 사용할 수 있어 다양한 플젝에 적용이 가능하다.