webpackで出力されたソースマップファイル（.map）を後からブラウザ（Chrome）に読み込ませる方法

最終更新日から90日以上経過しています。

webpackで複数のJavaScriptファイルをバンドルすると、人間が解析しにくい形に整形されます（難読化ではなくminifyの意味合い）。
プロダクトとしてリリースする際は、解析されない方が良いので問題ないのですが、
バグが発生した際のデバッグの時には少々困っていました。

ソースマップをファイルに埋め込むオプションが用意されていますが、リリースする際にソースマップが含まれるのは避けたい、という気持ちでした。
何か良い方法を探してみた所、ソースマップファイルを別ファイルとして出力し、後からブラウザに読み込ませる方法があったのでシェアします。

環境

確認したライブラリは以下の通りです。

正直バンドルするソースはなんでも良いのですが、とりあえずログを出力するだけのコードを用意します。

const outputLog = function() {
    console.log("output log.");
};

outputLog();

webpackの設定ファイル。重要なのはdevtoolプロパティなので、それ以外はなんでも良いです。
devtoolプロパティに設定した hidden-source-map がソースマップを別ファイルに出力するオプションになります。

module.exports = {
    entry: "./src/app.js",
    devtool: "hidden-source-map"
}

上記のapp.jsとwebpack.config.jsを準備し、webpackコマンドを実行すると、以下の2ファイルが出力されます。

開発者ツールの[Source]タブで、対象のソースを開きます。
現在はwebpackにより生成された状態なので、minifyされたソースが表示されます。

ソース画面で右クリック → Add source map… を選択します。

ソースマップファイルのURLを入力するポップアップが表示されるので、ローカルファイルのパスを入力します。
入力例は以下の通りです。

すると、左側のソース一覧タブにwebpack://が追加されるので、対象のソースを開くと
バンドルされる前のソースの内容が確認できます。