webpack-bundling-time.md

webpack 모듈 번들링 시점

Webpack의 설정 파일 (webpack.config.js)에 정의된 설정에 따라 실행된다.
설정에 따라 개발 모드와 프로덕션 모드에서 수행하는 작업이 다르게 설정될 수 있다.

webpack의 모듈 번들링은 두 가지 시점에서 이루어진다.

1. 개발 시점 (Development time)

개발자가 코드를 작성하고 저장할 때마다 Webpack은 모듈 번들링을 수행하여 변경 사항을 반영한다. 이를 "Hot Module Replacement (HMR)" 또는 "live-reloading"이라고 부르는데, 이는 개발자가 새로고침 없이 코드 변경 사항을 실시간으로 확인할 수 있도록 도와준다.

2. 빌드 시점 (Build time)

개발이 완료되고 배포를 준비할 때 Webpack은 최종적인 번들을 생성한다. 이 과정에서 코드 최적화 (minification, uglification), 트리 셰이킹, 코드 스플리팅 등의 과정이 포함될 수 있다. 생성된 번들은 실제 사용자에게 제공되는 애플리케이션의 일부이다.

Webpack 모듈 번들러 기능

1. 코드 분할 (Code Splitting)

웹팩을 사용하면 애플리케이션의 코드를 여러 개의 번들로 분할할 수 있다. 이를 통해 초기 로드 시간을 줄일 수 있으며, 특정 코드가 필요할 때만 해당 번들을 로드할 수 있다.

2. 트리 쉐이킹 (Tree Shaking)

웹팩은 사용되지 않는 코드를 제거하는 트리 쉐이킹 기능을 지원한다. 이를 통해 불필요한 코드를 최종 번들에서 제거하고 애플리케이션의 성능을 향상시킬 수 있다.

3. 로더 (Loaders)

웹팩의 로더를 사용하면 JavaScript 코드뿐만 아니라 CSS, 이미지, 폰트 등 다양한 유형의 파일을 처리할 수 있다. 이는 웹 애플리케이션에서 다양한 유형의 자원을 쉽게 관리하고 사용할 수 있게 해준다.

4. 플러그인 (Plugins)

웹팩은 다양한 플러그인을 지원한다. 플러그인을 사용하면 번들 과정을 세밀하게 제어하고, 복잡한 처리 과정을 쉽게 구현할 수 있다.

5. 빌드 최적화

웹팩은 코드를 최적화하고 미니파이(minify)하여, 최종적으로 배포될 번들의 크기를 최소화한다.