Hot Module Replacement(HMR)

React Hot Loader 사이트에 있는 비디오를 보고, 호기심을 가졌다. 전에 live-reload 기능이 있긴 하지만, 페이지 전체를 다시 불러오는 형태라서 비효율적으로 볼 수도 있다. 에디터에서 수정 후 저장하자마자 깜빡임도 없이 브라우저에 있는 UI가 바로 바뀌는 모습이 인상적이었다. 특히 CSS 수정했을 때 유용해보였다.

React Hot Loader는 React 컴포넌트를 수정할 때 상태를 잃지 않고, 즉각적으로 live refresh를 할 수 있게 해주는 Webpack 플러그인이다. 그래서 React.js와 Webpack을 사용해야한다. React.js만 지원한다.

간단하게 Webpack은 모든 Static Web Resource를 하나의 자바스크립트 파일로 만들 목적으로 사용하고, React.js는 페이스북에서 만든 뷰 구현을 돕는 프레임웍이다. 추가로 gulp와 coffee script를 사용했다.

Webpack

HMR 기능을 사용하려면 Webpack을 사용해야한다. require, configuration, cli 3가지 방법으로 로더를 사용할 수 있다.

CLI 방식:

require로 사용하는 방법:

!로 리소스와 로더를 분리할 수 있다.

configuration 방식 :

설정해야할 것이 많기 때문에, configuration을 정의한 후 gulp에서 사용하는 방식이 좋을 것 같다.

각각의 로더는 모두 설치해야한다. devDependency로 두는 것이 좋다.

개발서버 띄우기

HMR 기능을 사용하기 위해서 간단하게 데몬을 띄울 수 있다.

CSS작업만 한다면 이렇게 CLI모드를 사용해서 작업할 수 있다.

inline과 hot 옵션은?

  • –inline : webpack-dev-server 런타임 코드를 번들(.js)에 추가한다.
  • –hot : HotModuleReplacementPlugin 을 추가하고, hot mode로 서버를 교체한다. (모듈 변경 여부를 알려주는 역할)

HotModuleReplacementPlugin을 두 번 추가하지 않도록 주의해야한다.

윈도에서 경로 문제

윈도에서 웹팩 개발 서버가 제대로 변경된 파일을 감시하지 못하는 문제가 있었는데 설정파일에서 경로를 다음과 같이 변경해야 한다.

Webpack 관련 링크 모음

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다