Webpack

번들링 : 각각 나눠진 파일들 (ex) 자바스크립트 파일) 등을 하나로 모아서 묶어주는 작업을 뜻함

 

webpack의 등장

웹개발이 발전하면서 다양한 모듈의 도입으로 애플리케이션이 커졌다. 조각난 모듈들의 의존성을 파악하여 번들링 해 주는 webpack이 등장하였다.

 

장단점

 

장점 :

1. 성능 최적화 & 자동화

코드축소, 사용하지 않는 코드를 제거하는 tree shaking을 사용, http 요청 수를 감소시켜 웹사이트 성능을 향상시킴

 

2. 번들러가 제공하는 편의성

css가 아닌 Sass나 Stylus등을 사용할 경우, 또는 typescript 사용시, 번들러가 컴파일 과정에서 필요 플러그인을 추가하고 번들러를 실행해줌

 

3. CodeSplitting 을 통해 필요할 때만 스크립트를 로드 할 수 있다.

시시 적절히 원하는 때에 Dynanmic Loading(필요한 루틴이 호출될때만 동작하는 방), Lazy Loading(사용자가 필요할 때만콘텐츠로 대체됨)이 가능하다.

 

단점 :

1. webpack의 번들크기

2. 비교적 복잡한 configuration

3. 개발 모드 속도 (프로젝트가 크면 클수록, 하지만 webpack5에 캐싱옵션을 톻해 개선되었다고 한다.)

 

 

 

Webpack Config 에 대한 이해

 

참고 사이트

https://www.hanl.tech/blog/webpack-%ec%82%ac%ec%9a%a9%eb%b0%a9%eb%b2%95%ea%b3%bc-%ea%b8%b0%eb%8a%a5-%ec%9a%94%ec%a0%90-%ec%a0%95%eb%a6%ac/