SPA開発でhot reloadしたら自動でconsoleを削除する

hot reloadを使いながらシングルページアプリケーション(SPA)を開発していると，ブラウザーを再読み込みせずに開発が進められるのでとても便利なのですが，その代わりにconsoleにエラーが溜まっていきます．

このような状況では，以前のバージョンのエラーが残ってしまい，どのエラーが現在のバージョンで発生しているのかが分かりません．

そこで，hot reloadしたら自動でconsoleを削除するようにすると便利です．

webpackではhot reloadの際にmessageが送信され，event.dataはwebpackHotUpdateで始まります．これをイベントリスナーに登録し，コンソールを削除するように設定します．例えば以下のjavascriptをindex.htmlに追記します．

window.addEventListener('message', event => {
    if (typeof event.data == "string" && event.data.startsWith("webpackHotUpdate")) {
        console.clear();
    };
});

これで，最新のバージョンで発生したエラーのみがコンソールに表示されるようになり便利です．