[Hot Module Replacement] Hot Module Replacement, HMR

Hot Module Replacement(HMR)

webpack에서 제공하는 가장 유용한 기능 중 하나

모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트 가능

모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거

• 전체 로드 중 손실되는 애플리케이션의 상태 유지
• 변경된 사항만 갱신하여 시간 절약
• 소스 코드에서 css/js 수정 시, 브라우저에서 즉시 업데이트(= 브라우저 개발자 도구에서 직접 스타일 변경하는 것과 동일)

작동 방법

In the Application

1. 애플리케이션은HMR 런타임에 업데이트된 내용이 있는지 확인하도록 요청
2. 런타임에서 업데이트된 내용을 비동기적으로 다운받고 애플리케이션에 알림
3. 애플리케이션은 런타임에 업데이트 요청
4. 런타임은 업데이트를 동기적으로 적용

In the Compiler

이전 버전에서 새 버전으로 업데이트할 수 있도록 업데이트를 내보내야 함

1. 업데이트된 매니페스트(JSON)
2. 하나 이상의 업데이트된 청크(JavaScript)

매니페스트에는 새 컴파일 해시와 업데이트된 모든 청크 목록이 포함됨

각 청크에는 업데이트된 모든 모듈에 대한 새 코드가 포함됨

In a Module

HMR은 HMR 코드가 포함된 모듈에만 영향을 미치는 선택적 기능

한 가지 예는 style-loader 를 통해 스타일을 가져오는 것 ⇒ 패치가 작동하기 위해 HMR 인터페이스 구현

In the Runtime

check 는 업데이트 매니페스트에 HTTP 요청

요청 실패 시 가능한 업데이트가 없음을 의미

요청 성공 시 업데이트된 청크 목록과 현재 로드된 청크 목록 비교

모든 모듈 업데이트는 런타임에 저장됨

apply 는 업데이트된 모든 모듈을 유효하지 않은 것으로 표시

유효하지 않은 각 모듈에 대해 해당 모듈 또는 상위 모듈에 업데이트 핸들러가 있어야 함. 그렇지 않으면 잘못된 플래그가 버블링되고 부모도 무효가 됨