与Webpack 2捆绑的Electron Main Process的VSCode调试

Question

My Electron主进程使用TypeScript和捆绑的Webpack 2编写.

通过ts-loader和完成穿脱babel-loader.

发展模式,开始webpack --watch与主要工艺配置.

问题

我无法使用VSCode调试器调试主进程.

在入口点添加断点src/main/index.ts没有任何影响.

组态

.vscode/launch.js

{
  "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
    }
  ]
}

webpack.development.js

{
  target: 'electron',
  devtool: 'source-map',

  entry: {
    main: join(__dirname, 'src/main/index')
  },

  output: {
    path: join(__dirname, 'app'),
    filename: '[name].js'
  }
}

Answer 1

VSCode配置

重要的是给VSCode提供源文件,该文件是程序的入口点,并在"program"密钥中指定它.

您还需要在"outFiles"Webpack生成的包中指定.

{
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",

      // This is the important stuff
      "program": "${workspaceRoot}/src/main/index.ts"
      "outFiles": [
        "${workspaceRoot}/app/main.js"
      ],
      "sourceMaps": true
    }
  ]
}

Webpack配置

在Webpack配置中,您需要指定要在源映射中编写模块源文件的完整路径.

{
  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'
  }
}

另外要注意选择未评估的源映射,以允许VSCode静态查找相应的入口点.

最小的例子

我用最小配置和更多解释创建了一个repo.