SG의 개발 공부로그

웹팩(webpack) 이란 무엇인가? 본문

JavaScript

웹팩(webpack) 이란 무엇인가?

DebeloperSG 2022. 12. 18. 20:54
728x90

 

웹팩(webpack) 이란 무엇인가? 

 

웹 사이트를 개발하다 보면 JS, CSS, IMG 등 많은 리소스 파일들이 생기는데,

 

파일이 많아질수록 서버와의 접속이 많고 로딩이 느려지게 된다.

 

자바스크립트를 모듈화해서 사용하더라도 같은 스코프를 공유하기 때문에 변수 충돌이 일어날 수가 있다.

 

그리고 라이브러리 순서에따라 로딩 속도에도 차이가 생기거나 시간, 공간 복잡도에 따른 문제도 생길 수 있다.

 

그래서 등장한 게 번들러 (Bundler)

 

 

그 중에 가장 인기가 많은 웹팩 (webpack) 

 

 

웹팩 공식 사이트 사진.

 

앱을 구성하는 수많은 자원들을 하나로 병합, 압축해주는 것이 모듈 번들링이라고 한다.

 

번들러의 장점.

  1. 여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.
  2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽습니다.
  3. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 줍니다.

 

728x90