Webpack 5 で webpack-dev-server のホットリロードが効かない時の対処法

Webpack 5で開発を進める際、表題の件で詰まった上に解決策が見つけにくかったので、記録を残しておきます。

結論

webpack.config.jsのtargetに'web'を指定する。

解説

@babel/preset-envを用いてソースコードをES5相当に変換したい場合、webpack 5 ではtarget: ['web', 'es5'],という設定が必要になります。
しかし、現状（2021/4/3時点）の webpack-dev-server v3では、上記の設定によりホットリロードが効かなくなるバグが発生しています。
（browserslistによって対応ブラウザを指定する際も、同様のバグが発生するようです）

件のバグはwebpack-dev-serverのバージョンアップによって解消される見込みですが、それまではtarget:'web'の指定によって凌ぐしかなさそうです。

とはいえ、ES5対応が必須となっているプロジェクトではそんなことも言ってられません。
その場合は、modeの値が developmentであればtarget:'web'、 productionであればtarget:['web', 'es5']というような出し分けを実装するのがおすすめです。