Webpack 5 で HtmlWebpackPlugin を使っている時に、 HTMLファイル変更時にホットリロードする方法

調べても出てこず、1時間くらい悩んだので、他にも困っている人がいるかもと思い投稿します。

対象読者

• Webpack 5 を使っている
• HtmlWebpackPlugin を使って、HTMLファイルを生成している
• webpack-dev-server でホットリロードさせながら開発している
• JavaScriptやCSSのホットリロードは効くのに、HTMLは効かないな..ってなっている人

解決方法

html-webpack-harddisk-plugin を入れて、 pluginの設定をする。以上です。。

設定方法は上記GitHubに書いてある通りですが、以下となります。

webpack.config.js

// ファイル先頭近く
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); // 追加

// webpackのconfig
plugins: [
  // ...
  new HtmlWebpackPlugin({
    // ...
    alwaysWriteToDisk: true // 追加
    // ...
  }),
  new HtmlWebpackHarddiskPlugin() // 追加
  // ...
]  

余談

HtmlWebpackPluginのGithub を見ていたら

html-webpack-harddisk-plugin can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used

↓注目

useful when webpack-dev-server / HMR are being used

と書いてあって、気づきました。公式大事...。