제로 부터 react 비계 개발 (4)

이 편 은 주로 핫 업 데 이 트 를 다 루 는 것 일 수 있 습 니 다. 아주 섬세 하 게 썼 습 니 다. 재 미 있 는 부분 을 많이 만 나 일일이 설명해 드 리 겠 습 니 다.
최전선: 웹 팩 - dev - server 는 열 업 데 이 트 를 지원 합 니 다. 쉽게 말 하면 코드 를 수정 하면 브 라 우 저 는 자동 으로 페이지 를 새로 고 칠 수 있 습 니 다.
코드 캡 처 부터 볼 게 요.
웹 팩 - dev - server 설정.

history Api Fallback 을 true 로 설정 합 니 다. app. get ("*", index) 과 유사 합 니 다. 바로 모든 차단 되 지 않 은 404 페이지 가 index 로 전환 하도록 하 는 경로 입 니 다.

contentBase 는 dist 디 렉 터 리, 즉 웹 팩 으로 포 장 된 dist 디 렉 터 리 를 설정 하기 때문에 웹 팩 - dev - server 를 열기 전에 포장 해 야 합 니 다. 그렇지 않 으 면 index. html 파일 을 찾 을 수 없습니다.

inline 을 true 로 설정 하고 파일 을 업데이트 한 후 페이지 를 새로 고 칩 니 다.

hot 는 true 로 설정 되 어 있 으 며, 변경 모듈 만 업데이트 합 니 다. API 방식 으로 웹 팩 - dev - server 를 허용 하기 때문에 설정 항목 에 port 와 host 를 설정 해 야 합 니 다. 그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다.

중점: 기본 설정 이 완료 되면 웹 팩 의 entry 에 코드 를 추가 합 니 다.
API 를 걷 고 있 기 때문에 웹 패키지 DevServer 에 서 는 방법 으로 addDevServerEntrypoints 를 제공 합 니 다.두 개의 설정 매개 변 수 를 전달 하면 됩 니 다.그의 효 과 는 그림 과 같 아서 나 는 웹 팩 Config 를 인쇄 했다.
말하자면 핫 업 데 이 트 된 JS 파일 두 개 를 entry 에 수 동 으로 삽입 하여 함께 포장 하 는 것 이다.만약 우리 가 수 동 으로 쓴 웹 팩. config. js 라면, 이 점 을 알 아야 한다.그래서 이 API 는 매우 편리 하 다.
사실 여기까지 오 면 페이지 가 자동 으로 지 워 집 니 다.but... 설정 경험 치 에 따라 하나 더 설정 해 야 합 니 다.

plugins.push(new webpack.HotModuleReplacementPlugin());

but, 제 실제 테스트 결과 에 따 르 면 이 plugin 에 수 동 으로 가입 하지 않 아 도 열 업 데 이 트 를 실현 할 수 있 습 니 다.이 유 는 내 가 위 에서 말 한 것 처럼 API 가 자동 으로 이 설정 을 추 가 했 기 때문이다.우리 회사 의 비 계 는 이 API 결 과 를 사용 하지 않 아서 자신 이 많은 설정 을 추가 하 게 되 었 다.
BUT, 여기까지 오 면 첫 번 째 페이지 만 자동 으로 새로 고침 되 는 것 을 발견 할 수 있 습 니 다.우리 가 개발 한 것 이 react 응용 이 라면 턱 없 이 부족 하 다.프로젝트 가 커지 면 페이지 를 새로 고침 하 는 데 시간 이 많이 걸 리 기 때 문 입 니 다. 특히 서버 에서 렌 더 링 할 때.
게 으 른 업데이트 와 유사 한 기능 을 실현 하려 면 react - hot - loader 를 도입 해 야 합 니 다.최신 버 전 을 도입 합 니 다. 문서 에 따라 두 곳 만 설정 하면 됩 니 다.비계 의 babel 설정, plugin react - hot - loader / babel 추가
그리고 우리 프로젝트 디 렉 터 리 에 cli - view 에서 Root. jsx 를 감 싸 줍 니 다.
이로써 개발 환경의 자동 업 데 이 트 를 완벽 하 게 실현 할 수 있 습 니 다. 코드 를 변경 하면 현재 변 경 된 module 을 새로 고 칠 수 있 습 니 다. 전체 페이지 를 새로 고 치 는 것 이 아 닙 니 다.사실 또 하나의 작은 의문 이 있 습 니 다. 테스트 과정 에서 저 는 react - hot - loader / babel 이라는 plugin 을 추가 하지 않 아 도 게 으 른 업 데 이 트 를 실현 할 수 있 습 니 다. 프로젝트 디 렉 터 리 에 설정 하면 됩 니 다.이 plugin 의 소스 코드 를 보 았 는데 그 이 유 를 알 아 보지 못 했 습 니 다. 저 는 이 plugin 이 게 으 름 을 피 울 때 babel 컴 파일 을 한 번 걸 을 수 있 을 것 이 라 고 추측 합 니 다.사내 검증 이 필요 해!!!
참고 로 proxy 는 일반적으로 백 엔 드 인 터 페 이 스 를 호출 하면 크로스 필드 를 보고 하지만 proxy 를 설정 하여 node 층 에서 서비스 퍼 가기 를 한 것 과 유사 합 니 다.
나 는 원래 cli - view 디 렉 터 리 에 있 던 webpack. config. js 를 app. config. js 로 바 꾸 었 다.나 는 모든 설정 을 이 파일 안에 넣 었 다.로 컬 에서 포트 8888 서 비 스 를 사 용 했 습 니 다. 제 cli - view 의 port 는 3000 입 니 다. API 를 요청 한 후에 모든 / api 접두사 의 요청 이 8888 로 바 뀌 었 습 니 다.
여기까지 와 서 웹 팩 - dev - server 에 대한 내용 은 많 지 않 습 니 다.아주 가늘다
제로 부터 react 비계 개발 (5)