[번역] 웹 팩 은 모듈 열 교체 (hot module replacement) 에 사용 된다.

번역 이 거칠다
원문https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
주의 모듈 열 교체 (HMR) 는 여전히 시험 적 인 기능 이다.
소개 하 다.
모듈 열 교체 (HMR) 교환, 추가 또는 삭제 모듈 과 함께 지속 적 인 실행 을 적용 하여 페이지 새로 고침 이 필요 하지 않 습 니 다.
준비 작업

플러그 인 사용:http://webpack.github.io/docs/using-plugins.html

코드 분할:http://webpack.github.io/docs/code-splitting.html

webpack-dev-server: http://webpack.github.io/docs/webpack-dev-server.html

그것 은 어떻게 일 합 니까?
앱 각도 에서.
앱 코드 가 HMR 실행 을 요청 할 때 업 데 이 트 를 확인 합 니 다. HMR 이 실 행 될 때 업 데 이 트 된 코드 를 다운로드 (비동기) 하여 앱 코드 실행 에 사용 가능 함 을 알 립 니 다. 앱 코드 가 HMR 실행 을 요청 할 때 업 데 이 트 를 적용 합 니 다. HMR 실행 시 업데이트 (동기 화) 를 적용 합 니 다. 이 과정 에서 앱 코드 는 사용자 작업 에 의존 하지 않 아 도 됩 니 다 (필요 에 따라).
컴 파일 러 (Webpack) 각도 에서
일반적인 정적 파일 을 제외 하고 컴 파일 러 는 "Update" 를 실행 하여 버 전 업 데 이 트 를 진행 합 니 다. "Update" 는 두 부분 을 포함 합 니 다.

내용 에 대한 manifest (JSON)

하나 이상 의 업데이트 에 관 한 chunks (js)

manifest 는 새로운 컴 파일 결 과 를 포함 하 는 Hash 와 목록 에 저 장 된 chunks (2.) 를 포함 합 니 다.
업 데 이 트 된 chunks 는 chunk 에서 업 데 이 트 된 모든 모듈 의 코드 를 포함 합 니 다 (또는 모듈 이 삭 제 된 태그)
컴 파 일 러 는 모듈 과 chunk 의 id 가 여러 구성 에서 일치 하도록 추가 합 니 다. "records" JSON 파일 을 사용 하여 구성 사이 에 저장 합 니 다 (또는 메모리 에 저장 합 니 다)
모듈 각도 에서
HMR 은 선택 가능 한 기능 입 니 다. HMR 코드 를 포함 하 는 모듈 파일 에 만 영향 을 줍 니 다. 모듈 에서 사용 가능 한 API 일반 모듈 개발 자가 쓴 프로세서 코드 는 이 모듈 이 업데이트 에 의존 할 때 호출 됩 니 다. 현재 모듈 업데이트 시 호출 될 수도 있 습 니 다.
대부분의 경우 각 모듈 에 HMR 코드 를 강제로 쓰 지 않 습 니 다. 한 모듈 에 HMR 프로세서 가 포함 되 어 있 지 않 으 면 업데이트 이벤트 가 위로 거품 이 생 긴 다 는 것 은 하나의 프로세서 가 전체 모듈 트 리 의 업 데 이 트 를 처리 할 수 있다 는 것 을 의미 합 니 다.
HMR 운행 시 각도 (기술적)
모듈 시스템 에 있어 서 실행 할 때 모듈 의 부모 노드 를 추적 하기 위해 추가 코드 를 삽입 하 는 것 을 의미 합 니 다.
관리 차원 에서 운영 할 때 두 가지 방법 을 지원 합 니 다: check 과 applycheck 업데이트 한 manifest 요청 을 가 져 오 려 는 HTTP 요청 이 실 패 했 을 때 사용 가능 한 업데이트 가 없 음 을 의미 합 니 다. 그렇지 않 으 면 업 데 이 트 된 chunks 목록 을 되 돌려 줍 니 다.현재 불 러 온 chunks 목록 과 비교 하여 업 데 이 트 된 모든 chunk 에 대응 하 는 업 데 이 트 된 chunk 는 실 행 될 때 저 장 된 모든 코드 모듈 을 다운로드 합 니 다. 코드 에 따라 업데이트 실 행 될 때 ready 상태 로 전환 하여 업데이트 가 다운로드 되 었 음 을 나타 내 고 응용 프로그램 이 준비 되 어 있 음 을 나타 냅 니 다.
각 ready 상태의 새로운 chunk 요청 에 있어 서 업 데 이 트 된 chunk 도 다운로드 되 었 습 니 다.apply 방법 은 업 데 이 트 된 모든 모듈 을 invalid 라 고 표시 합 니 다. 모든 invalid 모듈 은 update 프로세서 가 있어 야 합 니 다. 모듈 에 있 거나 모든 부모 노드 가 그렇지 않 으 면 invalid 가 위로 거품 을 일 으 킵 니 다. 많은 부모 노드 도 invalid 로 표 시 됩 니 다. 이 절 차 는 더 이상 '거품' 이 나타 나 지 않 는 다 는 것 을 알 고 있 습 니 다. entry point 에 거품 이 생기 면 과정 이 실 패 했 음 을 설명 합 니 다.
현재 모든 invalid 모듈 은 처리 (dispose 프로세서) 되 고 마 운 트 해제 후 현재 hash 가 업데이트 되 며 모든 "accept" 프로세서 가 호출 되 어 실 행 될 때 "idle" 상태 로 전환 되 며 모든 것 이 계속 정상적으로 실 행 됩 니 다.
생 성 된 파일 (기술적)
왼쪽 은 초기 컴 파일 러 프로 세 스 를 표시 하고 오른쪽 은 모듈 4 와 9 업데이트 프로 세 스 를 표시 합 니 다.
이 걸 로 뭘 할 수 있 을 까?
개발 환경 에서 LiveReload 의 대체 로 사용 할 수 있 습 니 다. 실제 webpack-dev-server 은 하나의 hot 상 태 를 지원 합 니 다. HMR 업 데 이 트 를 통 해 전체 페이지 를 새로 고침 하려 고 시도 할 수 있 습 니 다. webpack/hot/dev-server entry point 만 추가 하고 dev-server 호출 시 인자 --hot 을 추가 할 수 있 습 니 다.webpack/hot/dev-server HMR 업데이트 에 실패 한 후 전체 페이지 를 새로 고 칩 니 다. 페이지 를 새로 고 치 려 면 webpack/hot/only-dev-server 이라는 entry point 를 바 꿀 수 있 습 니 다.
생산 환경의 업데이트 메커니즘 으로 도 사용 할 수 있 습 니 다.
일부 모듈 은 열 교 체 를 완성 할 수 있 는 모듈 을 만 들 수 있 습 니 다. 예 를 들 어 style-loader 은 스타일 을 바 꿀 수 있 습 니 다. 특별히 할 필요 가 없습니다.
그것 을 사용 하려 면 어떻게 해 야 합 니까?
모듈 은 "accept" 때 만 업데이트 되 기 때문에 부모 노드 나 부모 노드 의 부모 노드... module.hot.accept 호출 모듈, 예 를 들 어 router 가 좋 은 곳 이거 나 subview 에서webpack-dev-server 과 함께 사용 하려 면 webpack/hot/dev-server 이라는 entry point 를 더 해 야 합 니 다. 그렇지 않 으 면 check 과 apply 을 호출 하 는 HMR 관리 코드 가 필요 할 것 입 니 다.
컴 파일 러 에서 records 를 켜 서 서로 다른 과정 을 기록 하 는 모듈 id (watch 모듈 과 webpack-dev-server 메모리 에서 records 를 추적 해 야 하기 때문에 개발 중 에 할 필요 가 없습니다)
컴 파 일 러 HMR 을 켜 서 HMR 이 실 행 될 때
뭐 가 멋 있어 요?

은 각 모듈 에 대한 LiveReload

입 니 다.

생산 환경 에서

을 사용 할 수 있 습 니 다.

코드 분할 에 따라 업데이트 되 며, 응용 프로그램 에서 업데이트 해 야 할 부분 만 다운로드 합 니 다

응용 레이아웃 에 사용 할 수 있 으 며 다른 모듈

에 영향 을 주지 않 습 니 다.

HMR 이 비활성화 되면 모든 HMR 코드 가 컴 파 일 러 에 의 해 제 거 됩 니 다 (if(module.hot) 에 포함)

경고 하 다.

그것 은 시험 적 기능 에 속 하고 테스트 가

에 부족 하 다.

일부 bug

예상

이론 적 으로 생 성 환경 에 사용 할 수 있 지만 엄숙 한 상황 에 서 는

이 너무 이 를 수도 있다.

모듈 id 는 여러 컴 파일 과정 에서 추적 되 어야 합 니 다. 저장 (records)

이 필요 합 니 다.

최적화 기 는 첫 번 째 최적화 이후 모듈 id 를 최적화 할 수 없습니다. bundle 부피 에 영향 을 줍 니 다

HMR 작 동 시 bundle 의 부 피 를 증가 시 켰 습 니 다

생 성 환경 은 HMR 프로 세 서 를 검사 하 는 추가 테스트 코드 가 필요 합 니 다. 매우 어렵 습 니 다.

튜 토리 얼
웹 팩 코드 열 교 체 를 사용 하려 면 4 가지 일 을 해 야 합 니 다.

records ( --records-path , recordsPath: ... )

전역 오픈 코드 열 교체 (HotModuleReplacementPlugin)

코드 에 열 교체 코드 를 삽입 합 니 다 module.hot.accept

코드 에 열 교체 코드 module.hot.check, module.hot.apply

을 삽입 합 니 다.
작은 테스트:

/* style.css */
body {
    background: red;
}

/* entry.js */
require("./style.css");
document.write("");

이것 은 이미 dev-server 에서 코드 열 교 체 를 사용 하기에 충분 하 다.

npm install webpack webpack-dev-server -g
npm install webpack css-loader style-loader
webpack-dev-server ./entry --hot --inline --module-bind "css=style!css"

dev-server 메모리 에 있 는 records 를 제공 하여 개발 에 좋 습 니 다.--hot 옵션 을 선택 하여 코드 열 교 체 를 열 었 습 니 다.
이것 은 HotModuleReplacementPlugin 을 더 할 수 있 습 니 다. 명령 을 사용 하면 webpack.config.js 까지 쓰 지 않 아 도 됩 니 다.webpack/hot/dev-server 에 dev - server 의 특별한 관리 코드 가 있 습 니 다. --inline 을 통 해 자동 으로 가입 합 니 다. (webpack.config.js 에 추가 할 필요 가 없습니다)style-loader 에는 열 교체 관련 코드 가 포함 되 어 있 습 니 다.
뒤이어 방문 하 다http://localhost:8080/bundle빨간색 배경 과 input 상 자 를 볼 수 있 을 것 입 니 다. 문 자 를 입력 하고 style.css 색상 을 편집 하 십시오.
Voil à... 전체 페이지 를 새로 고 칠 필요 가 없습니다. 배경 이 업데이트 되 었 습 니 다. 입력 상자 의 텍스트 와 선택 영역 은 아직 있 을 것 입 니 다.
자신의 열 교체 (관리) 코드 를 어떻게 쓰 는 지 더 읽 기 hot module replacement
example - app 를 방문 하여 demo 를 직접 봅 니 다. (주의: 시간 이 지 났 으 니 원본 코드 도 보지 마 십시오. HMR API 중간 에 수정 이 있 기 때 문 입 니 다)