Jak używać debuggera VS Code z serwerem webpack-dev (punkty przerwane są ignorowane)

Question

Mój problem jest prosty.

Po prostu chcę, aby debugger VS Code pracował z webpack-dev-server bez ignorowania moich punktów przerwania.

Teraz WebPack-dev-serwer służy spakowane pliki z pamięci, natomiast, jeśli dobrze rozumiem to poprawnie, wyszukuje Code VS debugger dla nich na dysku (... czy nie? ...)

w rezultacie, kiedy ustawić punkt przerwania dostaję strasznych

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

teraz każdy powiązane pytanie ja znaleźliśmy miał do czynienia z pismem maszynowym głównie, a nie z faktu, że WebPack-dev-serwer służy od pamięć. Nie używam maszynopisu. Wydaje się, że ludzie nie używają serwera Webpack-dev lub brakuje mi czegoś oczywistego, z moimi pieniędzmi na ten drugi.

To jest mój kod 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 
    } 
    ] 
} 

a te są powiązane pozycje z moich webpack.config.js

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

próbowałem różnych modyfikacjach launch.json bezskutecznie, więc jestem po prostu wklejając to w formie waniliowej.

Należy pamiętać, że output.path jest używany tylko wtedy, gdy istnieje kompilacja produkcyjna, a pliki są wypychane na dysk.

Oto co struktura plików jest obsługiwanego stronie:

I tu jest polecenie używam w rozwoju

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

Wreszcie, tutaj jest istotne fragment z pliku śledzenia

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 s doprowadza mnie do szaleństwa, ostatnie 3 godziny spędziłem na przeszukiwaniu Googles bez rezultatu, a obecnie jest to 5 rano.

Answer 1

Z mojego doświadczenia (około 15 minut temu), jeśli "webpack.config.js" ma wartość dla właściwości context, to musi być rozliczane dla ".vscode/launch.json".

Dla przykładu, jeśli 'webpack.config.js' ma następujący:

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

Następnie launch.json wymaga tego kontekst ('src') za:

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

Właśnie zaktualizował/naprawił moje repo, więc teraz punkty przerwania TypeScript powinny się wiązać.

https://github.com/marckassay/VSCodeNewProject

Mam nadzieję, że pomaga.