コンパイラかく語りき

import { Fun } from 'programming'

JS開発環境の構築(2) WebpackローカルサーバのHMR起動

↓のつづき。 

chuckwebtips.hatenablog.com

 

今回は、スムーズに開発が進むように、WebpackのHMR(HotModuleReplacement)をオンにします。

 

以前、QiitaにPostしたこの記事では、CLIから実行することが推奨されていました。

qiita.com

 

ただし、今回はコンフィグファイルを作成します。

参考にしたのは以下の記事です。

dackdive.hateblo.jp

 

qiita.com

 

コンフィグ追記

まず、既存のコンフィグファイルに追記を行います。

 

まずは、.babelrcに"react-hmre"を追記します。HMR時にReactをコンパイルするためです。

 

gist.github.com

 

webpack.config.jsは以下のようになりました。

gist.github.com

変わったところは、entryが配列になったことと、pluginsという項目を用意しました。

通常ならば不要な処理なのですが、webpack-dev-serverを意識した作りに変更しました。

 

devserver.js作成

まあ、名前はなんでもいいのですが、HMRモードでWebpack-dev-serverを起動するためのファイルを作成します。

 

gist.github.com

 

webpack.config.jsを読み込んできて、ローカルサーバとしての設定や、HMRの設定を追加しています。

そして、最後にポート番号8080番で立ち上げます。

 

パッケージインストール

まだインストールしていないパッケージをインストールします。

$ npm install --save-dev babel-preset-react-hmre webpack-dev-server

 

HMRモードでWebpackローカルサーバを起動

さて、ようやくローカルサーバを実行することができます。

 

package.jsonのnpm scriptsにこのように追記しました。

f:id:chuck0523:20160628214058p:plain

$ npm run dev で node devserver.jsを実行します。その結果、WebpackのローカルサーバがHMRモードで起動します。

 

ブラウザで確認するとこのとおり。

f:id:chuck0523:20160628214255p:plain

まずは、ローカルサーバがきちんと立ち上がっています。

Reactのコードはこんな感じ。

f:id:chuck0523:20160628214322p:plain

 

文字列の中のビックリマークを増やしてみます。

 

f:id:chuck0523:20160628214353p:plain

そして、保存ボタンを押すと、

f:id:chuck0523:20160628214410p:plain

自動でブラウザがリロードされます。しかも、編集を加えたReactコンポーネントだけが再描画されます。便利ですね。

 

次回は、Expressに触れてサーバサイドレンダリングを実現させます。