【Webpack-Dev-Server】HTMLファイルを保存してもブラウザが自動リロードされない原因・対処方法

ファイルを保存したらブラウザが自動リロードされるWebpack-Dev-Serverを導入。

HTMLファイルを更新したが自動リロードされない原因・対処方法を知りたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

HTML更新でブラウザがリロードされない原因

Webpack-Dev-Serverのバージョン4より、JSファイルにバンドルされてないファイルは更新しても検知されない仕様になりました。

バンドルされてないファイルを検知するには、以下オプションを設定します。

module.exports = {
  devServer: {
    watchFiles: ["./src/**/*"],
  },
};

webpack.config.jsのdevServerにwatchFilesを追加します。

値に配列を指定。

配列要素に任意の更新したいファイル（HTML）へのパスを設定します。

以上で解決です。

Webpack-Dev-ServerでHTMLファイルを保存してもブラウザがリロードされない原因・対処方法について紹介しました。

以上で解説を終わります。