Hot Module Replacement (HMR)はwebpackの提供する仕組みで、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。再描画無しにと言うのは、「F5とかリロードボタンを押さなくても自動的に再描画してくれますよ」ということではなく、文字通り変更したモジュールのみを置き換えてくれます。

Reactを導入して開発環境を整えると、当然のようについてくるので使う分には意識する必要もないですが、、
で、これって何なんだっけ？というのを整理しました。

HMRは、Websocket通信と、ソースコードに注入されたいくつかのRuntimeと呼ばれるスクリプトによって実現されます。ソースコードの変更をコンパイラが検知し、WebSocketでブラウザに通知、通知を受け取ったRuntimeはサーバーから変更分のスクリプトを取得してモジュールを置き換えます。

前述したとおりこのツールはwebpackの提供する仕組みのためReactにかかわらず利用することができますが、HMRを行うためにはそのモジュールやアプリケーションに幾つかの実装が必要になります。

ということで、HMRを行うための「設定」の解説を記載します。
HMRを行うために必要なモジュールへの「実装」と、実際に動かすサンプルについてはモジュールをHMRに対応するための実装についてへ。

Webpack Dev Server

（HMRでなく単に）webpackを利用する場合、次のようなconfigを作ってwebpackコマンドなどでコンパイルします。

webpack.config.js

var path = require('path');

module.exports = {
  entry: {
    app: [
      './src/index.js'
    ],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index_bundle.js',
  }
};

HMRを利用する場合は、以下のような設定をします。(* の部分が追記です)

webpack.config.js

var path = require('path');

module.exports = {
  entry: {
    app: [
      'webpack-dev-server/client?http://localhost:8080', // (*)
      'webpack/hot/dev-server' // (*)
      './src/index.js'
    ],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/public/' // (*)
  },
  plugins: [
    // (*)
    new webpack.HotModuleReplacementPlugin()
  ]
};

そして、node devserver.jsで、次のスクリプトを実行して、Webpack Dev Serverを起動します。

devserver.js

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var config = require("./webpack.config.js");
var compiler = webpack(config);

var server = new WebpackDevServer(compiler, {
    publicPath: config.output.publicPath,
    hot: true
});
server.listen(8080);

これだけで、./src/index.jsに実装されたアプリケーションがHMRに対応していれば、JSの変更をリロード無しで読み込むHMRを利用することができます。（これはnode API版と呼ばれる対応の仕方で、そのほかにもCLI版、middleware版といくつかのやり方があります。ES6記法とモジュール管理をするためにbabelやwebpackの設定を0から行うためのハンズオンで簡単に紹介しているので詳しくはそちらを。ここでは、node API版を利用して解説します）
では、それぞれの設定などが何を行っているかを説明します。

構成

HMRを実現するWebpack Dev Serverは、大きく以下の３つで構成されています。

Webpackコンパイラ
サーバー（Assets サーバーとWebSocketサーバー）
いくつかのRuntime JS（JSコードに注入され、ブラウザで動作するスクリプト）

Webpackコンパイラ

WebpackコンパイラがJSコードを生成しますが、HMRでは通常のコンパイルと同時に幾つかの処理を行います。

アプリケーションのJSコードに、いくつかのRuntime JSを注入してコンパイルする（Bundle JS）。
ソースコードの変更を検知して、リコンパイルする
リコンパイル時に変更されたモジュールのみの含まれるJS (UpdateChunk JS)とメタ情報を格納するJSON (Manifest JSON)を生成する。

サーバー

expressサーバーを内包し、以下の２つのサーバーとしての役割を果たします。

Assets サーバー。Bundle JS、UpdateChunk JS、Manifest JSONを公開する
WebSocket サーバー。Runtime JSとWebSocket通信をし、リコンパイル結果を通知する

Runtime

３つのRuntimeがBundleに注入され、ブラウザで実行されます。

WebSocket Runtime・・・　WebSocketサーバーからの通知を受け取る
HMR dispatch Runtime・・・ HMR Runtimeにモジュールの更新を通知する
HMR Runtime・・・ UpdateChunk JSを取得し、既存のモジュールと差し替える