TypeScriptで書いてwebpackでビルドしたjsファイルのエラーをわかりやすくする #JavaScript

Why

webpackでバンドルしてるのでスタックトレースを見てもtsファイルでのエラー箇所がわからない・・

node-source-map-supportをインストールして、tsconfig.json, webpack.config.jsを修正します

$ npm install source-map-support

webpackのエントリポイントにしているtsファイルに以下を追加します。

app.ts

import sourceMapSupport from 'source-map-support'
sourceMapSupport.install()

webpack, TypeScriptの設定ファイルを修正します。

webpack.config.js

module.exports = {
    mode: 'development',
    target: 'node',
+   devtool: 'inline-source-map',
    ...
}

↑ちなみに、 devtool: 'inline-source-map'でも動きました。

tsconfig.js

{
  "compilerOptions": {
+   "sourceMap": true
   ...
  }
}

これで、webpackでビルドし直すと、エラー時にtsファイルの行数も教えてくれるようになりました

こんなかんじ（app.tsの73行目でエラーになってることがわかる）

at Object.<anonymous> (/path/to/project/dist/webpack:/src/app.ts:73:4)

以上です