Breakpoint not hit in TypeScript file using Visual Studio 2019 and Webpack

I have an ASP.NET MVC 5 application that we want to use typescript for client-side code and webpack to bundle everything up into a single js file. TypeScript is installed using npm. When I set a breakpoint in Visual Studio 2019 in a TypeScript file it is never hit. I am able to use the browsers developer tools to see the TypeScript file and set a breakpoint. Then when that breakpoint is hit it does show in Visual Studio. If I take webpack out of the mix and just let Visual Studio compile the TypeScript file I can set a breakpoint and it will be hit with no problem.

Here is our packages.json file:

{
  "name": "TypeScriptWebpackPlayground",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "main": "index.js",
  "scripts": {
    "Install": "npm install",
    "WebpackDevelopment": "webpack --mode=development",
    "WebpackProduction": "webpack --mode=production",
    "Debug": "run-s Install WebpackDevelopment",
    "Release": "run-s Install WebpackProduction"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "npm-run-all": "^4.1.5",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0"
  }

Here is the tsconfig:

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs", 
    "sourceMap": true, 
    "strict": true, 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true 
  }
}

Here is the webpack config: (I have tried both source-map and inline-source-map)

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: "./ClientApp/app.ts",
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    output: {
        path: path.resolve(__dirname, "Scripts/custom"),
        filename: "bundle.js"
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
};

Here is the one line TypeScript file that I am trying to get the breakpoint to be hit:

alert("Please break here!");

I was facing your same problem for a couple of days, none of the solution had solved my problem. However, I found a workaround that could possible work with you as well, first of all make sure you have these lines in your webpack.config.js

const webpack = require('webpack');

// ...

devtool: "inline-source-map",
    plugins: [
        new webpack.SourceMapDevToolPlugin({})
    ]

// ...

After that your bundle generated javascript should have a .map to be able to debug the code.

Nothing new from there, the trick I found that it works is:

1. Set a break point in your TypeScript file line in Visual Studio
2. Run the application
3. Open the Inspector (F12 or RMB -> Inspector)
4. Go to Sources tab, should has a cloud named webpack://, open that and look up for your TypeScript files, once you found it place a breakpoint in the same line you did on Visual Studio
5. Re-load your page or go where it should be called
6. Visual Studio will stop on the point you marked
7. For some reason it removes the breakpoint you've set, put another breakpoint and now it works fine