title: Debug Typescript in Chrome bundled by Webpack Visual Studio 2017 .NET Core 2.2
body: <p>There are a couple questions out there but most of the answers seem to be "it should be default now if you have VS 2017". My debugger isn't working, so I'd like to give my specific case to get some help. I'm also new to Typescript &amp; Webpack to give some context.</p>
  
  <p><strong>Project Hiearchy</strong></p>
  
  <pre><code>./wwwroot/bundles/bundle.js &lt;- this is the final bundled file
  ./Scripts/ &lt;- various directories where all the separate Typescript files live
  </code></pre>
  
  <p>When the project builds, it goes through these steps:</p>
  
  <ul>
  <li>Core project builds</li>
  <li>gulp task is kicked off</li>
  <li>Inside the gulp task, I use webpack stream to build the typescript files into the bundle.js</li>
  </ul>
  
  <p>Contents of my <strong>tsconfig.json</strong> file</p>
  
  <pre><code>{
    "compilerOptions": {
      "noImplicitAny": false,
      "noEmitOnError": true,
      "removeComments": false,
      "sourceMap": true,
      "strict": true,
      "noImplicitReturns": true,
      "target": "es2015",
      "moduleResolution": "node",
      "module": "es2015"
    },
    "exclude": [
      "node_modules",
      "wwwroot"
    ]
  }
  </code></pre>
  
  <p>Contents of the <strong>webpack.config.js</strong> file</p>
  
  <pre><code>module.exports = {
      mode: 'development',
      entry: './Scripts/index.ts',
      devtool: 'inline-source-map',
      module: {
          rules: [
              {
                  test: /\.tsx?$/,
                  use: 'ts-loader',
                  exclude: /node_modules/
              }
          ]
      },
      resolve: {
          extensions: ['.tsx', '.ts', '.js'],
          alias: {
              'vue$': 'vue/dist/vue.esm.js'
          }
      },
      output: {
          filename: 'bundle.js'
      }
  };
  </code></pre>
  
  <p><strong>Gulp task</strong> that compiles the typescript and puts it in it's final destination.</p>
  
  <pre><code>gulp.task("compile-typescript", function () {
      return gulp.src("./Scripts/index.ts")
          .pipe(webpack(require("./webpack.config.js")))
          .pipe(gulp.dest("./wwwroot/bundles"));
  });
  </code></pre>
  
  <p>After everything is compiled and running, when I put a break point in the Visual Studio IDE I get the "breakpoint not bound" problem. However, when looking at the debugger in Chrome, it seems like the TypeScript mapping files are being created in the webpack directory correctly.</p>
  
  <p><a href="https://i.stack.imgur.com/FSMLU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FSMLU.png" alt="Visual Studio Debugger not hooking up correctly"></a></p>