title: VSCode debugging of Node or Electron Main Process bundled with Webpack
body: <p>My Electron main process is written with TypeScript and bundled Webpack 2.</p>
  
  <p>Transpilation is done through <code>ts-loader</code> and <code>babel-loader</code>.</p>
  
  <p>Development mode starts <code>webpack --watch</code> with the <a href="https://github.com/Black-Monolith/SuperNova/blob/f65db6384a18245273b13b4041a8c2f2ab5c8aac/webpack/targets/webpack.main.js" rel="nofollow noreferrer">main process configuration</a>.</p>
  
  <h1>Problem</h1>
  
  <p>I cannot debug the main process using VSCode debugger.</p>
  
  <p>Adding a breakpoint in the entry point <code>src/main/index.ts</code> does not have any effect.</p>
  
  <h1>Configuration</h1>
  
  <h3><a href="https://github.com/Black-Monolith/SuperNova/blob/f65db6384a18245273b13b4041a8c2f2ab5c8aac/.vscode/launch.json" rel="nofollow noreferrer"><code>.vscode/launch.js</code></a></h3>
  
  <pre><code>{
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "runtimeArgs": [
          "${workspaceRoot}",
          "--remote-debugging-port=9222"
        ],
        "sourceMaps": true
      }
    ]
  }
  </code></pre>
  
  <h3><a href="https://github.com/Black-Monolith/SuperNova/blob/f65db6384a18245273b13b4041a8c2f2ab5c8aac/webpack/targets/webpack.main.js" rel="nofollow noreferrer"><code>webpack.development.js</code></a></h3>
  
  <pre><code>{
    target: 'electron',
    devtool: 'source-map',
  
    entry: {
      main: join(__dirname, 'src/main/index')
    },
  
    output: {
      path: join(__dirname, 'app'),
      filename: '[name].js'
    }
  }
  </code></pre>