[Webpack5] 画像やHTMLが変更された時にもホットリロードを有効にする方法

2022-7-4

目次

今回の題

webpack、webpack-dev-serverで開発用サーバーを立ち上げ、Phaser3というJS製のゲームフレームワークを用いてゲーム開発をしていた時の事です。
webpack-dev-serverには保存したCSS/JSのコードに変更があった際に自動でブラウザをリロードしてくれるホットリロードという機能があります。しかし、キャラクターやマップの画像、また、json形式のマップデータなどを変更した時には画面をリロードしてくれません。CSS/JSではないので当然なのですが、これらを変更した際に一々手動でリロードするのがとても苦痛でした。
そこで、なんとか試行錯誤した結果、改善することに成功したので記事にしてここに残します。

キャラクターやマップの画像はAseprite、マップデータはTiledというソフトで変更し保存しております。

方法

devServerのwatchFilesオプション。
watchFilesオプションには監視対象のディレクトリやファイルを渡します。

module.exports = {
  // 諸々省略
  devServer: {
    watchFiles: ["assets/"],
  },
}

画像ファイルだけでなく、jsonやhtmlなどのホットリロードの監視対象外のものもここで指定することができます。

以上!!