Webpack を使用してアプリケーションをバンドルする前は、IIFE を使用してモジュールを作成し、それらをwindowオブジェクトにアタッチしてアクセスできるようにしていました。これにより、Chrome ブラウザーでのデバッグが非常に簡単になりました。これは、モジュールがすべてグローバルに利用可能であり、ブレークポイントを使用して調べることができるためです。
最近、Webpack を使用してアプリケーションをバンドルするように移行しましたが、これはすばらしいことです。ただし、ブレークポイントを設定し、インポートされたモジュールを検査したい場合、モジュール名を参照して検査することはできません。これは、内部で Webpack がモジュールの名前を別の名前に変更しているためだと確信しています。
特定のファイルの import ステートメントの例を次に示します (ところで、インポートされた各モジュールはオブジェクトをインポートしています)。
そして、その同じファイルで、ブレークポイントを設定すると、以前のようにモジュールの内容を検査できるようにしたいと考えています。CustomHelpers下の画像では、オブジェクトに格納されたヘルパー関数のコレクションであるモジュールにアクセスしようとしています。
Chrome コンソールでデバッグ中にこれらのインポートされたモジュールを参照する方法について何か考えはありますか?
明確にするために、私webpack.config.jsは機能しており、ソースマップが有効になっているため、文字化けした bundle.js ファイルではなく元のファイルが表示されます。具体的には、インポートしたモジュールを調べて、その内容を確認しようとしています。