Written by Kasumi

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

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

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

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

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

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

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

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

watchFilesを設定する

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

webpack.config.jsdevServerwatchFilesを追加します。

値に配列を指定。

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

以上で解決です。

まとめ

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

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

目次

関連記事

JavaScript

JavaScriptを使って別ページにリダイレクトさせる方法

2022.12.13
355
JavaScript

JavaScriptでスマホ画面をタップした時のイベントを検知する方法

2022.11.15
570
JavaScript

【JavaScript】HTML要素に指定したクラスが付与されているか存在をチェックする方法

2023.01.25
87
JavaScript

【JavaScript】setTimeoutが効かない。よくあるパターンの対処方法

2022.12.05
1065