webpack-dev-serverのauto-reloadでハマったこと
上の記事と同じくHMRが動かないところで詰まったけど，こちらの記事とは別のやり方で解決できたのでメモとしてまとめようかと思います．

今回，上の記事の解決策ではどうしてダメなのか

上の記事は，最終的には静的なファイル(./index.html)と webpack-dev-server で出力されるファイル(./js/build/bundle.js)を同一ディレクトリ内に配置する(index.htmlを./js/build直下に再配置?)ことで解決しています．
上の記事では，

原因はファイルの場所がよろしくなかったみたい。
serveされる場所に静的ファイルと変更がかかるファイルがないとダメみたいだった。
...中略...
contentBaseを追加して静的ファイルと出力ファイルを同じ階層においたら動いた。

と書かれていますが，今回，以下のようなディレクトリ構成と webpack.config.js でうまく webpack-dev-server の auto-reload を機能させたかったので上の記事とは別の解決策を探る方向になりました．

.
├── dist
│   ├── css
│   ├── index.html   -> ./dist/js/index.jsを呼び出す静的なファイル
│   └── js
│       └── index.js -> Webpackで出力されるファイル
└── src
    ├── component01.js -> ./src/index.jsでimportされるファイル
    ├── component02.js -> ./src/index.jsでimportされるファイル
    └── index.js       -> Webpackのエントリーファイル

// webpack.config.js
const path = require('path');

module.exports = {
  entry: {
    path: path.resolve(__dirname, './src/index.js'),
  },
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: 'index.js',
  },

  devtool: 'source-map',
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2017']
      }
    }]
  },
  resolve: {}
};

publicPathを用いる

http://webpack.github.io/docs/webpack-dev-server.html を読むと， webpack.config.js で output.publicPath を用いることで解決できそうなのがぼんやりとですがわかりました．
具体的には， webpack.config.js の output 部分を以下のように書き換えます．

output: {
  path: path.resolve(__dirname, './dist/js'),
  publicPath: '/js/', // この行を追加
  filename: 'index.js',
}

また， ./dist/index.html から呼び出す際は， <script src="js/index.js"></script> で呼び出せます．
※ <script src="./js/index.js"></script> ではなぜか動きません．要調査．

最後に

Chrome の Console を見ると以下のようなログが確認できました．

[WDS] App updated. Recompiling...                                             client?cd17:80
[WDS] App hot update...                                                      client?cd17:212
[HMR] Checking for updates on the server...                                 dev-server.js:45
[HMR] Updated modules:                                                log-apply-result.js:20
[HMR]  - 11                                                           log-apply-result.js:22
[HMR]  - 52                                                           log-apply-result.js:22
[HMR] Consider using the NamedModulesPlugin for module names.         log-apply-result.js:28
[HMR] App is up to date.                                                    dev-server.js:27

しかし，タブの自動更新が起こらず，手動でタブの更新をしないと変更が反映されません．
こちらも要調査だけど，これで自分の好きなディレクトリ構成で開発ができるようになりました〜．
やっぱり公式ドキュメントはちゃんと読むべきですね...^^;

手付かずブログ

webpack-dev-serverでモジュールの変更が反映されない

今回，上の記事の解決策ではどうしてダメなのか

publicPathを用いる

最後に