webpack-dev-server v4でHTML(EJS)の変更を検知してブラウザをリロードする

更新

結論

webpack.config.jsのdevServerにwatchFilesオプションを追加します。パスや拡張子は必要に応じて変更してください。

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

動作確認環境

  • Node.js v16.13.0
{
  "devDependencies": {
    "ejs-plain-loader": "^1.4.1",
    "html-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

経緯

以下のUdemyの講座を進めていたときのこと。

Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)

webpack-dev-serverを導入して開発用サーバーを立ち上げたのですが、EJSを変更してもブラウザがリロードしてくれない…。
手動でリロードするとちゃんと変更が反映されているので、コンパイル自体はされているようです。
CSSやJSは変更して保存するとブラウザが更新されるのに…。

というわけで、ドキュメントを確認してみると、以下の記述がありました。

Instantly update the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser’s dev tools.

CSSとJS、つまりJSにバンドルされるファイルは変更され次第ブラウザを更新してくれるみたいです。一方、htmlファイルやejsファイルはバンドルされません。なのでデフォルトの状態ではコンパイルをしても、変更の監視・ブラウザのリロードはしてくれないということでしょうか。

それは困るのでwebpack-dev-serverのドキュメントを探すとwatchFilesというオプションが見つかりました。

devServer.watchFiles
This option allows you to configure a list of globs/directories/files to watch for file changes.

watchFilesオプションを利用すれば、webpackに特定のファイルの変更を監視させることができるとのこと。

というわけで以下の設定をwebpack.config.jsに追加しました。

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

すると、.ejsファイルを変更してもブラウザが更新されるようになりました。やったね。