title: How to setup vscode for debugging when working with Typescript, React, and webpack?
body: <p>I have followed <a href="https://www.typescriptlang.org/docs/handbook/react-&amp;-webpack.html" rel="noreferrer">the official tutorial from the Typescript website</a> and successfully setup a working <code>Typescript</code> + <code>React</code> + <code>webpack</code> application. But the breakpoint I set didn't work when debugging it using vscode. Here is the structure of my code.</p>
  
  <pre><code>.
  ├── dist
  ├── index.html
  ├── node_modules
  ├── package.json
  ├── src
  │   ├── components
  │   │   └── Hello.tsx
  │   └── index.tsx
  ├── tsconfig.json
  └── webpack.config.js
  </code></pre>
  
  <h3>webpack.config.js</h3>
  
  <pre><code>module.exports = {
      entry: "./src/index.tsx",
      output: {
          filename: "bundle.js",
          path: __dirname + "/dist"
      },
  
      // Enable sourcemaps for debugging webpack's output.
      devtool: "source-map",
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: [".ts", ".tsx", ".js", ".json"]
      },
  
      module: {
          rules: [
              // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
              { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
  
              // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
              { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
          ]
      },
  
      // When importing a module whose path matches one of the following, just
      // assume a corresponding global variable exists and use that instead.
      // This is important because it allows us to avoid bundling all of our
      // dependencies, which allows browsers to cache those libraries between builds.
      externals: {
          "react": "React",
          "react-dom": "ReactDOM"
      },
  };
  </code></pre>
  
  <h3>tsconfig.json</h3>
  
  <pre><code>{
      "compilerOptions": {
          "outDir": "./dist/",
          "sourceMap": true,
          "noImplicitAny": true,
          "module": "commonjs",
          "target": "es5",
          "jsx": "react"
      },
      "include": [
          "./src/**/*"
      ]
  }
  </code></pre>
  
  <h3>package.json</h3>
  
  <pre><code>{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "Searene &lt;mycityofsky@gmail.com&gt; (https://searene.github.io)",
    "license": "ISC",
    "dependencies": {
      "@types/react": "^15.0.31",
      "@types/react-dom": "^15.5.1",
      "react": "^15.6.1",
      "react-dom": "^15.6.1"
    },
    "devDependencies": {
      "awesome-typescript-loader": "^3.1.3",
      "source-map-loader": "^0.2.1",
      "typescript": "^2.3.4"
    }
  }
  </code></pre>
  
  <h3>Hello.tsx</h3>
  
  <pre><code>import * as React from "react";
  
  export interface HelloProps { compiler: string; framework: string; }
  
  export const Hello = (props: HelloProps) =&gt; &lt;h1&gt;Hello from {props.compiler} and {props.framework}!&lt;/h1&gt;;
  </code></pre>
  
  <h3>index.tsx</h3>
  
  <pre><code>import * as React from "react";
  import * as ReactDOM from "react-dom";
  
  import { Hello } from "./components/Hello";
  
  ReactDOM.render(
      &lt;Hello compiler="TypeScript" framework="React" /&gt;,
      document.getElementById("example")
  );
  
  console.log("the breakpoint is put here");
  </code></pre>
  
  <h3>index.html</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;title&gt;Hello React!&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="example"&gt;&lt;/div&gt;
  
          &lt;!-- Dependencies --&gt;
          &lt;script src="./node_modules/react/dist/react.js"&gt;&lt;/script&gt;
          &lt;script src="./node_modules/react-dom/dist/react-dom.js"&gt;&lt;/script&gt;
  
          &lt;!-- Main --&gt;
          &lt;script src="./dist/bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>Launch.json used in vscode</h3>
  
  <pre><code>{
      "version": "0.2.0",
      "configurations": [
          {
              "type": "chrome",
              "request": "launch",
              "name": "Launch Chrome against localhost",
              "url": "http://localhost:3000",
              "webRoot": "${workspaceRoot}",
              "runtimeExecutable": "/usr/bin/google-chrome-stable"
          },
          {
              "type": "chrome",
              "request": "attach",
              "name": "Attach to Chrome",
              "port": 9222,
              "webRoot": "${workspaceRoot}"
          }
      ]
  }
  </code></pre>
  
  <p>I installed the <a href="https://github.com/Microsoft/vscode-chrome-debug" rel="noreferrer">extension: VS Code - Debugger for Chrome</a>. Then run the following command.</p>
  
  <pre><code>webpack
  </code></pre>
  
  <p>Two files are generated in the <code>dist</code> directory.</p>
  
  <pre><code>dist
  ├── bundle.js
  └── bundle.js.map
  </code></pre>
  
  <p>Yes, I do have a <code>map</code> file. Then I setup a server in the root directory, which listens to <code>http://localhost:3000</code>. I can see that my app is running correctly without any errors or warnings.</p>
  
  <p><a href="https://i.stack.imgur.com/FnqJq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FnqJq.png" alt="my working app"></a></p>
  
  <p>Then I started chrome with debugging enabled</p>
  
  <pre><code>google-chrome-stable --remote-debugging-port=9222
  </code></pre>
  
  <p>Then in vscode, I set a breakpoint in the following line in <code>index.tsx</code>.</p>
  
  <pre><code>console.log("the breakpoint is put here");
  </code></pre>
  
  <p>and pressed <code>F5</code> to start debugging.</p>
  
  <p>I can see that the log is successfully printed in <code>DEBUG CONSOLE</code>, but it didn't stop on the breakpoint, it just kept running.</p>
  
  <p><a href="https://i.stack.imgur.com/n1xnO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/n1xnO.png" alt="enter image description here"></a></p>
  
  <p>What can I do to make the breakpoint work in vscode?</p>