VSpackデバッガとwebpack-dev-serverの使い方（ブレークポイントは無視されます）

Question

私の問題は簡単です。

ブレークポイントを無視しないでVSpackのデバッガをwebpack-dev-serverで動作させたいだけです。

私はこれを正しく理解していれば今、WebPACKの-devのサーバーが、一方で、メモリからバンドルされたファイルを提供、VSコードデバッガを検索彼らのために、ディスク上（...かどうか？...）

私はブレークポイントを設定するたびにその結果、私は恐ろしい

今

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

、私はなくWebPACKの-devのサーバーから働くことが事実と、ほとんどtypescriptですとしなければならなかった見つけることができるすべての関連する質問を取得しますメモリ。私はタイスクリプトを使用していません。人々はwebpack-dev-serverを使用していないか、まったく明白な何かを紛失していると思います。

これは私が無駄にlaunch.jsonに様々な修正を試してみましたので、私はちょうど貼り付けています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' 
    }, 

からの関連線であり、私のVSのコードですそれはバニラの形です。

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私は狂った運転している、私は無駄にGoogleを精練する最後の3時間を費やして、現在は5AMです。

Answer 1

私の経験から（約15分前）、 'webpack.config.js'にコンテキストプロパティの値がある場合は、 '.vscode/launch.json'を考慮する必要があります。例えば

、 'webpack.config.js' は、以下を持っている場合：

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

そして、あまりにもその文脈（ 'SRC'）を必要とするlaunch.json：

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

私はちょうど私のレポを更新/修正しましたので、TypeScriptブレークポイントはバインドする必要があります。

https://github.com/marckassay/VSCodeNewProject

私はそれが役に立てば幸い。