【覚書】webpackでバンドルしたjs内のfunctionをhtmlから呼ぼうとしてnot definedとなったら

source.js

//(省略)

const hoge = () => {
    console.log("htmlから呼んだでー")
}

//(省略)

上記jsソースをwebpackでバンドルするとbundle.jsが生成されるものとします。

caller.html

<!--(省略)-->

<script src="bundle.js"></script>

<!--(省略)-->

<a href="#" onclick="hoge">htmlから呼ぶでー</a>

<!--(省略)-->

こんな感じで書いておくと、not definedのエラーが出てしまいます。
なぜなら、source.jsで定義したhogeという名前は、バンドル後のbundle.jsでは別の名前（アルファベット1文字とか）になってしまっているからです。

これを解決するには、次のようにhtml側ではなくjs側でonclick属性を指定すると良いでしょう。
便宜上、jQueryを使用した例で記述します。

source.js

//(省略)

const hoge = () => {
    console.log("htmlから呼んだでー")
}

//追加
$("#caller").on("click", hoge);

//(省略)

これに対応してhtml側も変更します。

caller.html

<!--(省略)-->

<script src="bundle.js"></script>

<!--(省略)-->

<!-- onclickを削除して、js側から特定するためのidを追加 -->
<a id="caller" href="#">htmlから呼ぶでー</a>

<!--(省略)-->

html側にonclickをどうしても書きたい場合、グローバルに定義する方法もあります。
下記の記事を参照してください。

webpackでビルドしたbundle.jsの関数をonclickで動かしたかった話。
【メモ】webpack環境下においてonclickで関数が発火しなかった件