Typescript + Webpack 项目中缺少源映射

在开发Typescript + Webpack项目时，源映射是一个非常重要的工具，它能够帮助我们在调试代码时快速定位到源代码的位置。然而，有时候我们会发现在项目中缺少源映射，这给我们的调试工作带来了一定的困扰。那么，如何解决这个问题呢？本文将为大家介绍一种解决方法，并通过一个案例代码来说明。

javascript
const path = require('path');
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}