[Webpack] 웹팩(Webpack)의 개념

 

 

 

 

 

 

> 관련글 :: [Webpack] 자바스크립트 모듈화의 역사

 

 

 

🌈 웹팩(Webpack) 의 개념

웹팩은 오픈소스 자바스크립트 모듈 번들러이다.

 

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

 

 

웹사이트에 접속하여 크롬의 개발자 모드를 통해 네트워크를 확인하면 위와 같이 여러 타입으로 구성된 많은 리소스 파일이 있다. 사이트의 로딩이 완료되었을 때 해당 리소스들이 모두 다운로드되며, 많은 파일의 다운로드는 웹 로딩의 속도 저하로 이어질 수 있다.

 

이러한 이슈를 해결하기 위해 등장한 것이 번들러이며, 번들러 중 가장 많이 사용되는 도구 중 하나가 웹팩이다.

 

 

 

 

🎁 웹팩(Webpack) 의 장점

◾ 여러 리소스를 압축하여 최적화하기 때문에 로딩에 대한 네트워크 비용 감소 효과를 가져온다.

◾ 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 

◾ 최신 자바스크립트 문법을 지원하지 않는 브라우저에서도 사용할 수 있다. 

 

 

 

 

💡 번들러 사용의 문제점과 웹팩의 해결방법

번들러의 사용으로 많은 리소스가 하나의 파일로 병합되면 초기 로딩 비용이 커질 수 있다. 

이러한 이슈에 대해 웹팩은 청크, 캐시, 코드 스플릿과 같은 기능를 도입하여 해결하였다.

 

 

 

 

 

 

 

 

📌 참고사이트

 

- 웹팩핸드북