我的问题很简单。
我只想让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 Code 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点。
根据我的经验(约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断点应该绑定。
https://github.com/marckassay/VSCodeNewProject
我希望有所帮助。
对于Webpack 4:
如果您尚未安装webpack-cli
(已从webpack
中取出),请在本地安装.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
}
(这是在Debug视图中单击滚轮图标时VSCode打开的文件):
stopOnEntry
webpack.js
将使调试器在的第一行(shebang)停止,如下所示:
https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
旧线程,但它仍然出现在搜索...
感觉就像打开“将生成的代码写入磁盘”可能是解决方案:根据module.exports = {
//...
devServer: {
writeToDisk: true
}
};
,将其添加到webpack.config.js:
start-server-webpack-plugin
如果有人麻烦与webpack的@MarkoBonaci's answer:
我最近坚持同样的问题,start-server-webpack-plugin
来救援。但是,我坚持使用webpack插件生成的另一个错误:https://nodejs.org/en/docs/inspector。
下面是我通过vscode调试器启动应用程序时遇到的错误:
cd / home / me / projects / villageger-topics; env“NODE_ENV = development”/home/me/.nvm/versions/node/v11.6.0/bin/node --inspect-brk = 33538 node_modules / .bin / webpack-cli --colors --progress --config。 /webpack.dev.js监听ws://127.0.0.1:33538 / d8bb6d64-a1a1-466e-9501-6313a3dc8bcf的调试器有关帮助,请参阅:附带
StartServerPlugin
调试器。 clean-webpack-plugin:/ home / rajeev / projects / villageger-topics / dist已被删除。 10%构建1/1模块0活动webpack正在观看文件...在127.0.0.1:33538上发出StartServerPluginStarting检查器后,98%失败:地址已在使用中
正如您所看到的,33538
正在使用父进程已经使用的相同端口StartServerPlugin
。所以我们需要告诉StartServerPlugin
使用其他端口进行检查初始化。这个,我们可以通过new StartServerPlugin({
name: 'server.js',
nodeArgs: ['--inspect=5858'], // allow debugging),
})
的初始化来实现。
nodeArgs
在5858
,我们将检查端口指定为qazxswpoi。保存此配置,然后通过vscode的调试器重新启动应用程序后,您将成功启动该应用程序。