↓のつづき。
今回は、スムーズに開発が進むように、WebpackのHMR(HotModuleReplacement)をオンにします。
以前、QiitaにPostしたこの記事では、CLIから実行することが推奨されていました。
ただし、今回はコンフィグファイルを作成します。
参考にしたのは以下の記事です。
コンフィグ追記
まず、既存のコンフィグファイルに追記を行います。
まずは、.babelrcに"react-hmre"を追記します。HMR時にReactをコンパイルするためです。
webpack.config.jsは以下のようになりました。
変わったところは、entryが配列になったことと、pluginsという項目を用意しました。
通常ならば不要な処理なのですが、webpack-dev-serverを意識した作りに変更しました。
devserver.js作成
まあ、名前はなんでもいいのですが、HMRモードでWebpack-dev-serverを起動するためのファイルを作成します。
webpack.config.jsを読み込んできて、ローカルサーバとしての設定や、HMRの設定を追加しています。
そして、最後にポート番号8080番で立ち上げます。
パッケージインストール
まだインストールしていないパッケージをインストールします。
$ npm install --save-dev babel-preset-react-hmre webpack-dev-server
HMRモードでWebpackローカルサーバを起動
さて、ようやくローカルサーバを実行することができます。
package.jsonのnpm scriptsにこのように追記しました。
$ npm run dev で node devserver.jsを実行します。その結果、WebpackのローカルサーバがHMRモードで起動します。
ブラウザで確認するとこのとおり。
まずは、ローカルサーバがきちんと立ち上がっています。
Reactのコードはこんな感じ。
文字列の中のビックリマークを増やしてみます。
そして、保存ボタンを押すと、
自動でブラウザがリロードされます。しかも、編集を加えたReactコンポーネントだけが再描画されます。便利ですね。
次回は、Expressに触れてサーバサイドレンダリングを実現させます。