webpack-dev-server で ライブリロード（ホットリロード）がされないときには webpack.config.js の devServer.contentBase と output.publicPath の設定を見直してみる

状況

Web でも散見されますが、webpack-dev-server のライブリロード（ホットリロード）が効かない状況を想定します。似たような状況においてそうなのですが、これに気づかずに開発を続けると、コード上は正しくても動作に反映されないので無駄な時間を費やしちゃうんですよね。数十分から数時間ハマった時点で「あれ、何かおかしい……」と気付き、大元のコードではなく環境に問題があることが分かって徒労感が凄まじいという……。

結論

webpack.config.js にて devServer.contentBase と output.publicPath の設定を見直しましょう。

• devServer.contentBase には、コンテンツのルートディレクトリを指定します
• output.publicPath には、バンドルされたファイルが存在するパスを指定します

具体例

たとえば、public/index.html がコンテンツのトップ（ルート）であるとします。そして public/assets/javascripts にバンドルされたファイルが書き出されると仮定します。そのとき、webpack.config.js は以下のようになります。

（前半部分省略）

module.exports = {
（中略）
  output: {
    publicPath: '/assets/javascripts/'
（中略）
  },
  devServer: {
    contentBase: './public'
（以降省略）

補足

ライブリロードが正常に動作している場合はコンソールログに [WDS] Live Reloading enabled. という表示が出るので動作の参考にすると良いでしょう。

gyazo.com