Typescript + Webpack + VSCodeな環境でChromeではsouceMapが読み込まれているのに、VSCodeでは読み込めずVSCodeでブレークポイントが使えない

Question

実現したいこと

Chromeではデバッグできるので、VSCode上でもブレークポイントを使ってデバッグできるようにしたい。

発生している問題・分からないこと

VSCodeではsouceMapが読み込めずVSCodeでデバッグができない。どうやらsouceMapとトランスパイルされたjsが別のコンテンツと判定されている…？

エラーメッセージ

[Debug Diagnostics:]


✅ This breakpoint was initially set in:

D:\Dropbox\Job\Engineering\uetax\src\scripts\module\CsvFileReader.ts line 37 column 1
❓ We couldn't find a corresponding source location, and didn't find any source with the name CsvFileReader.ts.
How did you expect this file to be loaded? (If you have a compilation step, you should pick 'sourcemap')

---

http://localhost:9223/weekReport.bundle.js
sourceReference: 1966746525
absolutePath:
absolutePath verified? ❌ Disk verification failed (does not exist or different content)
sourcemap children: None (does not have a sourcemap)
referenced from sourcemap: None (not from a sourcemap)

該当のソースコード

const config: Configuration = {
    devtool: "source-map",
    entry: {
        weekReport: "./src/index.ts",
    },

    output: {
        path: path.join(__dirname, "dist"),
    },

    module: {
        rules: [
            {
                // 拡張子 .ts の場合
                test: /\.tsx?$/,
                // TypeScript をコンパイルする
                use: {
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                        configFile: "tsconfig.json",
                    },
                },
            },
    ],
};
// 設定をデフォルトエクスポート
export default config;

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch development server",
            "url": "http://localhost:9223",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "dev",
            "skipFiles": ["<node_internals>/**"],
            "trace": true,
            "sourceMaps": true,
            "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack://./src/*": "${webRoot}/src/*"
            }
        }
    ]
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

• launch.jsonに "resolveSourceMapLocations": ["${workspaceFolder}/", "!/node_modules/**"],を追加してみる
• sourceMapPathOverridesを変えてみる等

補足

フォルダー階層：
/proj
├─ .vscode
│ ├─ lanch.json
│ ├─ task.json
│ └─ www.code-wokspace
├─ dist
│ ├─ proj.bundle.js
│ ├─ proj.bundle.js.map
│ └─ index.html
├─ src
│ └─ ...
├─ package.json
├─ tsconfig.json
└─ webpack.config.ts

Answer 1

tsconfigを次のように変えたらデバッグできるようになりました。また、実際にブレークポイントを挟んだそのコードまで走らせることが大事なようです。
before:

{
    "compilerOptions": {
      "target": "ES2015",
      "sourceMap": true
      //other option
    }
}

after:

{
    "compilerOptions": {
      "target": "ES2019",
      "sourceMap": true
      //other option
    }
}

ただターゲットをES2015→ES2019にしただけですが‥他のパッケージとの相性がES2015と悪かったのかもしれません。