VS Code Webview Developer 工具可以处理源映射吗？

Question

我正在开发一个带有 webview 的 VSCode 扩展。在这个 webview 中，我运行一个脚本 bundle.js 来自许多与 webpack 捆绑在一起的 TypeScript 源。该脚本通过 vscode-资源 URI 加载。相应的源映射文件 bundle.js.map 在文件系统中紧挨着它。

现在，当我在调试模式下从主机 VS Code 启动我的扩展并使用 "Developer: Open Webview Developer Tools" 时，我只看到 bundle.js，并提示有源映射。但是相应的 TS 源不会出现在导航器中，也无法使用 CMD-P 加载。手动添加源映射（右键单击 > 添加源映射...）没有任何效果，无论是 vscode-资源 URI 还是文件 URI。

当我直接使用 webview 的 HTML 作为 Chrome 中的文件但使用相对 URL 来加载完全相同的脚本时，我在 Chrome调试器。

如何说服 Webview 开发工具使用它运行s 脚本的源映射？

Answer 1

感谢 https://vscode-dev-community.slack.com 的 eamodio 告诉我答案：

确保 eval-source-map 是 webpack 配置中的 devtool。

例如我的 webpack 配置是：

module.exports = {
  entry: "./src/main.js",
  output: {
      filename: "./bundle.js",
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "eval-source-map",

  resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  },

  module: {

      rules: [

          { test: /\.tsx?$/, enforce: "pre", loader: "awesome-typescript-loader" },
          // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
          { test: /\.js$/, enforce: "pre", loader: "source-map-loader" }
      ]
  },

  // Other options...
};

VS Code Webview Developer 工具可以处理源映射吗？

Can the VS Code Webview Developer tools deal with source-maps?

webview

source-maps

webpack

visual-studio-code