我一直在研究一个vsCode扩展,并且能够很好地启动和调试。
但是现在将扩展与webpack绑定后,我无法正确绑定断点
"我尝试过的事"
- 应用https://stackoverflow.com/a/53236103/1461862中提到的解决方案
- 将输出文件从/out/更改为/dist/
- 删除outFiles配置
dist文件夹包含extension.js.map,但vscode仍无法绑定断点,但问题仍然存在
我得到的错误是:
我们找不到对应的源位置,也找不到任何扩展名为.ts的源
这里是相关文件
lauch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
],
"outFiles": [
"${workspaceFolder}/out/test/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
下面是webpack.config.js
'use strict';
const path = require('path');
/**@type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
libraryTarget: "commonjs2",
devtoolModuleFilenameTemplate: "../[resource-path]",
},
devtool: 'source-map',
externals: {
vscode: "commonjs vscode" // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
},
resolve: { // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js']
},
module: {
rules: [{
test: /\.ts$/,
exclude: /node_modules/,
use: [{
loader: 'ts-loader',
options: {
compilerOptions: {
"module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
}
}
}]
}]
},
}
module.exports = config;
1条答案
按热度按时间stszievb1#
您需要更改
launch.json
文件中的outFiles
配置,以匹配webpack包的输出文件夹。在您的情况下,它应该是:这将告诉VSCode在哪里查找源Map和对应于TypeScript文件的转换JavaScript文件。
webpack.config.js
文件中的devtoolModuleFilenameTemplate
选项也很重要,因为它告诉webpack如何生成相对于工作区文件夹的源Map路径。出现
We couldn't find a corresponding source location, and didn't find any source with the name extension.ts
错误的原因是VSCode在out
文件夹中查找源文件,而不是webpack放置源文件的位置。通过更改outFiles
配置,您将告诉VSCode在dist
文件夹中查找源文件,webpack已经在该文件夹中生成了源Map和转换后的JavaScript文件。要了解有关VSCode如何使用webpack调试TypeScript文件的更多信息,请阅读本文:https://code.visualstudio.com/docs/typescript/typescript-compiling#_webpack
我希望这个答案能帮助你解决问题。