如何使用VS代码调试器与webpack-dev-server（忽略断点）

Question

我的问题很简单。

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

现在的WebPack-DEV-服务器供应来自内存捆绑的文件，同时，如果我正确地理解这一点，对他们VS代码调试器搜索磁盘上（......不？......）

其结果是，每当我设置一个断点，我得到了可怕的

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

现在，每一个相关的问题，我能找到有做打字稿居多，而不是与的WebPack-DEV-服务器从提供的事实记忆。我不使用打字稿。似乎人们不是在使用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"] 

Thi这让我疯了，我花了3个小时去搜索Google，但现在已经是凌晨5点了。

Answer 1

根据我的经验（大约15分钟前），如果'webpack.config.js'具有上下文属性的值，那么必须考虑'.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, 

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

https://github.com/marckassay/VSCodeNewProject

我希望帮助。