webpack-dev-server integration with vscode and typescript for react

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug",
      "preLaunchTask": "webpack: dev server",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "trace": true
    }
  ]
}

packages.json

{
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.dev.js --inline --hot"
  }
}

tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "label": "webpack: dev server",
      "script": "start",
      "promptOnClose": true,
      "isBackground": true,
      "problemMatcher": {
        "owner": "webpack",
        "severity": "error",
        "fileLocation": "absolute",
        "pattern": [
          {
            "regexp": "ERROR in (.*)",
            "file": 1
          },
          {
            "regexp": "\\((\\d+),(\\d+)\\):(.*)",
            "line": 1,
            "column": 2,
            "message": 3
          }
        ],
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Compiling\\.\\.\\.",
          "endsPattern": "Linting complete\\."
        }
      }
    }
  ]
}

webpack.dev.js

// Add your other webpack stuff here...
module.exports = {
  devtool: 'source-map'
}