वेबपैक-देव-सर्वर (ब्रेकपॉइंट्स अनदेखा) के साथ वीएस कोड डीबगर का उपयोग कैसे करें

Question

मेरी समस्या सरल है।

मैं बस अपने ब्रेकपॉइंट्स को अनदेखा किए बिना वेबपैक-देव-सर्वर के साथ वीएस कोड के डीबगर काम करना चाहता हूं।

अब, webpack-देव-सर्वर, स्मृति से बंडल फ़ाइलों में कार्य करता है, जबकि, अगर मैं इस सही ढंग से समझ, डिस्क पर उनके लिए वी.एस. कोड डिबगर खोज (... या नहीं? ...)

नतीजतन, जब भी मैं एक ब्रेकपाइंट सेट मैं खतरनाक

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

हर संबंधित सवाल मुझे लगता है ज्यादातर, और नहीं तथ्य यह है कि webpack-देव-सर्वर से कार्य करता है के साथ टाइपप्रति साथ करना था सकता है मिल अब, याद। मैं टाइपस्क्रिप्ट का उपयोग नहीं कर रहा हूँ। ऐसा लगता है कि लोग या तो वेबपैक-देव-सर्वर का उपयोग नहीं कर रहे हैं, या बाद में मेरे पैसे के साथ, मुझे कुछ स्पष्ट रूप से स्पष्ट याद आ रही है।

यह मेरा वी.एस. कोड 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 
    } 
    ] 
} 

है और इन कोई लाभ नहीं हुआ launch.json करने के लिए अपने webpack.config.js

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

मैं कोशिश की है विभिन्न संशोधनों से संबंधित लाइनें हैं, तो मैं बस चिपकाने हूँ यह वेनिला रूप में।

ध्यान दें कि 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 घंटों में गुगलों को कुचलने के लिए खर्च नहीं किया है और यह वर्तमान में 5AM है।

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, 

मैं बस मेरे रेपो को अपडेट/फिक्स किया गया है, इसलिए टाइपस्क्रिप्ट ब्रेकपॉइंट्स को बांधना चाहिए।

https://github.com/marckassay/VSCodeNewProject

मुझे आशा है कि मदद करता है।