如何在webpack-dev-server中使用VS Code调试器（忽略断点）

Question

我的问题很简单。

我只想让VS Code的调试器与webpack-dev-server一起工作，而不会忽略我的断点。

现在，webpack-dev-server从内存中提供捆绑的文件，而如果我理解正确的话，VS Code调试器会在磁盘上搜索它们（...或不？？）

因此，每当我设置断点时，我都会遇到可怕的

Breakpoint ignored because generated code not found (source map problem?)

现在，我能找到的每个相关问题都主要与打字稿有关，而不是webpack-dev-server从内存中提供的事实。我没有使用打字稿。似乎人们要么没有使用webpack-dev-server，要么我错过了一些显而易见的东西，我的钱就是后者。

这是我的VS代码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": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "trace": true
    }
  ]
}

这些是我webpack.config.js

的相关行

  devtool: 'cheap-module-source-map',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },

我已尝试对launch.json进行各种修改但无济于事，所以我只是以香草形式粘贴它。

请注意，output.path仅在存在生成版本且文件被写入磁盘时使用。

以下是服务页面中文件的结构：

这是我在开发中运行的命令

  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js"
  },

最后，这是跟踪文件中的相关块

From target: {"method":"Debugger.scriptParsed","params":{"scriptId":"30","url":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","startLine":0,"startColumn":0,"endLine":150,"endColumn":57,"executionContextId":2,"hash":"216099518F33D6091EC12795265804FB35669A30","executionContextAuxData":{"isDefault":true,"frameId":"18228.1"},"isLiveEdit":false,"sourceMapURL":"manifest.0ec68ebd5f0abf9b4cd4.js.map","hasSourceURL":false,"isModule":false,"length":5906}}
Paths.scriptParsed: could not resolve http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js to a file under webRoot: e:\Mitch\Workspace\Projects\project-name. It may be external or served directly from the server's memory (and that's OK).
SourceMaps.getMapForGeneratedPath: Finding SourceMap for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js by URI: manifest.0ec68ebd5f0abf9b4cd4.js.map and webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMaps.loadSourceMapContents: Downloading sourcemap file from http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js.map
To client: {"seq":0,"type":"event","event":"script","body":{"reason":"new","script":{"id":1,"source":{"name":"manifest.0ec68ebd5f0abf9b4cd4.js","path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","sourceReference":1001}}}}
To client: {"seq":0,"type":"event","event":"scriptLoaded","body":{"path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js"}}
SourceMap: creating for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js
SourceMap: sourceRoot: 
SourceMap: sources: ["webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159"]
SourceMap: webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMap: no sourceRoot specified, using webRoot + script path dirname: e:\Mitch\Workspace\Projects\project-name\
SourceMap: mapping webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159 => webpack\bootstrap 7617f9bf7c8b0bc95159, via sourceMapPathOverrides entry - "webpack:///*": "*"
SourceMaps.scriptParsed: http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js was just loaded and has mapped sources: ["webpack\\bootstrap 7617f9bf7c8b0bc95159"]

这让我感到疯狂，我花了最后3个小时搜索谷歌无济于事，现在已经是凌晨5点。

Answer 1

根据我的经验（约15分钟前），如果'webpack.config.js'具有context属性的值，则必须考虑'.vscode / launch.json'。

例如，如果'webpack.config.js'具有以下内容：

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.ts',

然后launch.json也需要上下文（'src'）：

"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}/src",
"sourceMaps": true,

我刚刚更新/修复了我的repo，所以现在TypeScript断点应该绑定。

Option

我希望有所帮助。

Answer 2

对于Webpack 4：
如果您尚未安装webpack-cli，则请在本地安装webpack。（

}。

将以下VSCode调试配置添加到.vscode/launch.json（当您在“调试”视图中单击滚轮图标时，VSCode打开的文件）：

{ "type": "node", "request": "launch", "name": "build", "program": "${workspaceFolder}/node_modules/.bin/webpack-cli", "args": [ "--config", "webpack.config.prod.js" ], "autoAttachChildProcesses": true, "stopOnEntry": true }

stopOnEntry会使调试器停在webpack.js的第一行（shebang）中，如下所示：

Answer 3

旧线程，但仍然在搜索中出现...

感觉像打开“将生成的代码写入磁盘”可能是这里的解决方案： 按照https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-，将其添加到webpack.config.js：

module.exports = {
  //...
  devServer: {
    writeToDisk: true
  }
};