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을 두 번 추가하지 않도록 주의해야한다.
윈도에서 경로 문제
윈도에서 웹팩 개발 서버가 제대로 변경된 파일을 감시하지 못하는 문제가 있었는데 설정파일에서 경로를 다음과 같이 변경해야 한다.
|
|
// context: __dirname + "/src", // OSX or Linux context: __dirname + "\\src", // 윈도용 |
Webpack 관련 링크 모음
