Hot Module Replacement(HMR)

Aug 25, 2015

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가지 방법으로 로더를 사용할 수 있다.

# webpack 설치
npm install webpack -g

CLI 방식:

# entry.js 파일을 분석해서 bundle.js 파일을 만든다.
webpack ./entry.js bundle.js

# .jade 파일에 대해 jade 로더, .css 파일에 대해 style 로더 사용
webpack --module-bind jade --module-bind 'css=style!css'

# png 파일에 대해 url 로더 사용하고, mimetype을 image/png로 설정했다.
webpack --module-bind "png=url-loader?mimetype=image/png"

require로 사용하는 방법:

require("./loader!./dir/file.txt");
require("jade!./template.jade");

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

configuration 방식 :

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

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

npm install webpack css-loader style-loader --save-dev

개발서버 띄우기

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

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

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

inline과 hot 옵션은?

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

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

윈도에서 경로 문제

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

// context: __dirname + "/src", // OSX or Linux
    context: __dirname + "\\src", // 윈도용<

Webpack 관련 링크 모음