title: Using Chrome to debug React TypeScript .tsx file - Webpack
body: <p>I'm using webpack for bundling my js-files so normally I only see one big bundled file under sources in Chrome. However if I add a <code>debugger;</code> to my <code>.tsx</code> file I can see a single file just fine. My question is if I can get webpack to output all my files in Chrome Source so that I can browse them there and just click a row if I wan't the debugger to stop? </p>
  
  <p>In the screenshot below I would like a folder for <code>Scripts/src</code> and then all my files.</p>
  
  <p><a href="https://i.stack.imgur.com/qgpsj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qgpsj.png" alt="enter image description here"></a></p>
  
  <p>Sample code:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
      &lt;title&gt;App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  &lt;script src="/Scripts/dist/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.tsx:</p>
  
  <pre><code>import * as React from "react";
  import * as ReactDOM from "react-dom";
  import * as ReactRouter from "react-router";
  import * as ReactBootstrap from "react-bootstrap";
  import { Test } from "./components/test";
  
  ReactDOM.render(
      &lt;div&gt;
          &lt;Test text="Well!" /&gt;
          &lt;Container /&gt;
      &lt;/div&gt;,
      document.getElementById("app")
  );
  </code></pre>
  
  <p>test.tsx:</p>
  
  <pre><code>import * as React from "react";
  
  export interface ITestProps {
      text: string
  }
  
  export class Test extends React.Component&lt;ITestProps, {}&gt; {
      render() {
          debugger;
          return &lt;div className="well"&gt;{this.props.text}&lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>webpack.config.json:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require("path");
  var proxy = 'localhost:61299';
  
  module.exports = {
      entry: [
          // activate HMR for React
          'react-hot-loader/patch',
  
          // the entry point of our app
          './Scripts/src/index.tsx',
      ],
      output: {
          filename: "./Scripts/dist/bundle.js",
      },
  
      // Enable sourcemaps for debugging webpack's output.
      devtool: "source-map",
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
      },
  
      module: {
          loaders: [
              { test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader'] }
          ]
      },
  
      plugins: [
          // enable HMR globally
          new webpack.HotModuleReplacementPlugin(),         
  
          // prints more readable module names in the browser console on HMR updates
          new webpack.NamedModulesPlugin(),
      ],
  
      devServer: {
          proxy: {
              '*': {
                  target: 'http://' + proxy,
              }
          },
          port: 8080,
          host: '0.0.0.0',
          hot: true,
      },
  }
  </code></pre>