How to debug webpacked TypeScript in VS 2017

I am using webpack with ts-loader to transpile and bundle various TypeScript files. Here are my configs:

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "lib": [ "dom", "es2015", "es2016" ],
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "preserveConstEnums": true,
    "skipLibCheck": true
  },
  "include": [
    "node_modules/@types/**/*.d.ts",
    "src/**/*.ts"
  ]
}

webpack.config.js

var path = require('path');

module.exports = {
    context: path.join(__dirname, 'src'),
    entry: { 
        app: './app'
    },
    output: {
        path: path.join(__dirname, 'dist/'),
        filename: '[name].bundle.js'
    },
    resolve: {
        extensions: ['.js','.ts']
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            loaders: ['ts-loader'],
            exclude: /(node_modules|bower_components)/
        }]
    },
    devtool: 'inline-source-map'
};

My folders are organized as

/src
/dist

In the src folder I have my .ts files and the pre-webpack js and .map files that the typescript compiler creates (via ts-loader). In the dist folder I get the webpacked js with inline source maps. The webpacked js is referenced by my html pages. When I run the project in VS and set a breakpoint in the original .ts file, the breakpoint says "The breakpoint will not currently be hit. No symbols have been loaded for this document." And of course it is not hit. How can I make the source maps work to be able to debug in my original TypeScript?

UPDATE: TypeScript debugging in VS works fine using IE or Chrome when webpack is not in the mix. It is the addition of webpack that is causing the problem.