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

scriptタグの読み込み・実行タイミングを変更する方法【defer / async属性を使おう】

2023.01.01
1771
JavaScript

【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

2023.01.06
2342
JavaScript

JavaScriptでオブジェクトのプロパティに変数を追加する方法

2022.12.22
1594
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
6533