🙁課題

IEの利用者向けに「IEは非対応です。別のブラウザをお使い下さい」という表示をしようと思います。ところがIEの判定ルーチン部分や画面表示に関してはIEで処理できる必要があり、Webpack導入済みの環境で真面目にこれをやろうとすると、IE対応の必要なファイルとそうでないファイルを切り分けて云々……とする必要があります。
IE判定なんて複雑なものでもなし、告知画面そのものは所謂ペライチでJSすら使わないレベルなのに、これは面倒or本末転倒……っていうのが今回解決したい課題となります。

👴結論

そもそもIE判定及び告知画面についてはWebpackで扱わず、手打ちのHTML,CSS,JSファイルを作ってwebpackの出力先フォルダに突っ込んだ方が楽なのでは。 babel関係も不要で、Gitの無視ファイル設定だけちょこっと弄るだけですし。

手順

1. IE判定を行い、非対応の告知画面ページへ遷移するルーチンを書いたJSファイルを作る

const isIe = function (userAgent) {
  return (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1)
}
if (isIe(window.navigator.userAgent.toLowerCase())) { location.href = "【警告画面のHTMLファイルのパス】" }

もちろん、ここでDOMを書き換えて告知画面を出してもいいのですが、

何かの拍子にwebpackでバンドルしたjsと干渉しそうで不安
書き換え処理のJSもIE11対応する必要がある
告知画面のHTMLファイルは要件の性質上、直書きできる可能性が高く、この場合エディタの補完が効く

という点を考慮して、告知画面は別ファイルに切り出してます。
それからIE11でもconstは使えます。

2. メインとなるHTMLファイルのheadタグ内にWebpackで生成したファイルより先に記述する

<head>
  <script type="text/javascript" src="【IE判定＆遷移ルーチン（要IE11対応）】.js"></script>
  <script type="text/javascript" src="【Webpackで作ったファイル】.js"></script>
</head>

3.非対応の告知画面はざっくり手打ちの静的ファイルだけで構成

「IEは非対応です。別のブラウザ使ってください」という旨の表示以外何もしようがないので、手打ちHTMLとCSSだけで何とかなる範疇かと。HTMLファイル内に全部書いてしまってもいいかもしれませんね。

もうちょっとユーザーフレンドリーにするなら、エラー画面を見ているユーザーはWindowsユーザーかつEdgeをインストール済みであることが期待できるので、「Edgeで開く」リンクを置いておくといいと思います。
マイナーなテクニックですが、Windowsの場合、レジストリにパラメータを登録しておくと、ブラウザからURLスキームを使ってインストールしてあるソフトを呼び出すことができるんですね。
そしてedgeに関してはインストールした時に登録済みなので、

<a href="microsoft-edge:【edgeで開かせたいURL】">Edgeで開く</a>

こういうリンクを踏ませるだけでedgeで開かせることができます。
ただまぁメジャーなChromeじゃなくてマイナーなEdgeを薦めるのはどうか、という葛藤もありますが、IE11を使ってるユーザー相手ですとねぇ……。B2BでITとは縁遠い業界相手になるほど刺さるかと。

備考

告知画面の表示ですが手抜きしすぎて、適当な背景＋画面のど真ん中に「Internet Explorerはサポート外です。別のブラウザをお使い下さい」という表示を出すだけだと、怪しげなフィッシングサイトに飛ばされた感が半端ないです😅 背景ぐらいは通常サイトに揃えるなり、一緒に会社ロゴを表示するなり、多少なり公式アピールをした方がいいです。

参考

使用してるブラウザを判定したい - Qiita
Microsoft EdgeでWebページを開くインターネットショートカット初心者備忘録