[FrontEnd] WebPack

> WebPack

1. JavaScript Application 을 위한 정적 모듈 번들러

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

3. 특징

- 성능 최적화 & 자동화

코드 축소와 더불어 사용하지 않는 코드를 제거하는 tree shaking과 같은 최적화를 수행 함으로써 HTTP 요청 수를 감소하여 웹사이트 성능을 궁극적으로 향상시키고, 로딩 속도를 빠르게 향상 시켜준다.

- 파일 단위의 자바스크립트 모듈 관리

HTML, CSS, JS, Images, Font 등 모든 파일 하나 하나 나눠서 모듈화하여, 웹 애플리케이션을 구성할 수 있게 해준다.

- 번들러가 제공하는 편의성

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

- Dependency Issue(종속성 문제) 해결

서버와 브라우저 모두에서 최대한 원활하게 작동할 수 있는 코드의 상당부분을 빌드 시 모든 종속성과 함께 번들하는데 도움을 준다.

 

4. Next.js 의 경우 next.config.js 에서 webpack() 함수로 설정 가능.