[JS]What is Webpack

ykh0316·2022년 4월 28일
0

JavaScript

목록 보기
2/3
post-thumbnail

Webpack 이란?

웹팩은 여러 파일을 하나로 합쳐주는 자바스크립트 번들러이다.

하나의 entry point에서 시작하여 의존하는 모듈을 찾아내고, 결과적으로 하나의 결과물을 만들어 낸다. 웹팩은 모듈 시스템을 구성하는 기능 이외에도 컴파일 속도를 빠르게 해준다거나, 로더를 사용할 수 있다는 등의 장점을 가지고 있다.

Webpack 사용 이유

1. 웹 어플리케이션의 빠른 로딩

현대의 웹 어플리케이션은 수많은 리소스 파일(js,html,css 등등)등을 생성한다, 만약 사용자가 어떤 어플리케이션을 방문했는데 페이지를 로딩하는데 시간이 오래걸린다면 사용자 경험이 좋지 않을 것이다 웹팩은 그 리소스 파일들을 하나의 파일로 번들링하여 브라우저에서 서버로 요청하는 파일 수를 줄여 네트워크 요청을 줄이고 페이지를 로딩하는 시간을 줄였다

2.자바스크립트 모듈화로 인한 이슈 해결

<script src="/js/vendor/vendor01.js"></script>
<script src="/js/module01.js"></script>
<script src="/js/lib/library01.js"></script>
<script src="/js/module02.js"></script>
<script src="/js/module03.js"></script>

일반적인 방식으로 자바스크립트를 모듈화해서 각각 불러오면, 자바스크립트의 특성에 따라 변수가 같은 스코프를 공유하게 되어 전역변수끼리 충돌이 발생할 수 있다 또한 자바스크립트 라이브러리 로딩 순서에 따른 이슈도 발생할 수 있고, 복잡도에 따른 관리 문제 또한 생길 수 있다

-> 웹팩을 사용하면 수많은 모듈 중, 당장 의존성이 있는 클래스나 함수를 적시에 가져와서 사용할 수 있게 할 뿐더러(웹팩의 코드 스플리팅), 외부 라이브러리의 의존성을 쉽게 관리할 수 있다.

3.개발환경과 배포환경의 분리

각각 다른 웹팩 config 파일을 만들어 개발환경과 배포환경을 분리하여 작업이 가능해 각기 다른 의존성 모듈들을 관리할수 있다. 또한 배포시에는 코드 난독화, 압축, 최적화(tree shaking) 작업을 지원하여 사용환경의 프로그램을 사용자 입장에서 쾌적한 환경으로 만들어주면서 보안까지 신경쓸 수 있게 된다.

profile
개발은 낭만이다

0개의 댓글