Using TypeScript map files with webpack and ts-loader

In order to properly setup your map files for TypeScript while using webpack to build your app you’ll need to make sure a few things are covered in the webpack.config.js and tsconfig.json files.

In your webpack.config.js file make sure you have one of the typescript loaders installed and referenced. We will use ts-loader in this example. In your project root run the following command:

npm install --save-dev ts-loader

In your tsconfig.json ensure you have “sourceMap” set to true under “compilerOptions”.

Your webpack.config.js should look something like this:

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

You’ll need to make sure devtool, module, and resolve are set to what you see above plus any additional options/loaders you might be using. Also make sure your entry is your TypeScript file instead of the output js. As a note this will have ts-loader compile your TypeScript instead of just using the output js from your current build process.