如何在 VS 2017 中调试 webpack TypeScript答案

【问题标题】：How to debug webpacked TypeScript in VS 2017如何在 VS 2017 中调试 webpack TypeScript
【发布时间】：2018-01-10 04:48:50
【问题描述】：

我正在使用带有 ts-loader 的 webpack 来转换和捆绑各种 TypeScript 文件。这是我的配置：

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "lib": [ "dom", "es2015", "es2016" ],
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "preserveConstEnums": true,
    "skipLibCheck": true
  },
  "include": [
    "node_modules/@types/**/*.d.ts",
    "src/**/*.ts"
  ]
}

webpack.config.js

var path = require('path');

module.exports = {
    context: path.join(__dirname, 'src'),
    entry: { 
        app: './app'
    },
    output: {
        path: path.join(__dirname, 'dist/'),
        filename: '[name].bundle.js'
    },
    resolve: {
        extensions: ['.js','.ts']
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            loaders: ['ts-loader'],
            exclude: /(node_modules|bower_components)/
        }]
    },
    devtool: 'inline-source-map'
};

我的文件夹按如下方式组织

/src
/dist

在 src 文件夹中，我有我的 .ts 文件以及 typescript 编译器创建的 pre-webpack js 和 .map 文件（通过 ts-loader）。在 dist 文件夹中，我得到了带有内联源映射的 webpacked js。我的 html 页面引用了 webpacked js。当我在 VS 中运行项目并在原始 .ts 文件中设置断点时，断点显示“当前不会命中断点。没有为此文档加载任何符号。”当然它没有被击中。如何使源映射能够在我的原始 TypeScript 中进行调试？

更新：当不使用 webpack 时，VS 中的 TypeScript 调试可以使用 IE 或 Chrome 正常工作。导致问题的原因是添加了 webpack。

【问题讨论】：

标签： javascript typescript webpack visual-studio-2017

【解决方案1】：

假设您使用的是 angular cli：运行 ng serve 在 localhost:4200 打开浏览器并检查页面。找到webpack/src/fileyouwanttdebug，放置断点刷新页面

【讨论】：

谢谢，但我根本没有使用角度。另外我想在 Visual Studio 中调试 TypeScript，而不是在浏览器中调试 JavaScript。当不使用 webpack 时，VS 中的 TypeScript 调试可以正常使用 IE 或 Chrome。导致问题的原因是添加了 webpack。更新了问题以反映这一点。
好吧，我的错，只是让您知道，尽管您可以通过 webpack 在浏览器中调试实际的 Typescript。 VS 使用 launch.json 文件进行调试，你可以看看。 code.visualstudio.com/docs/editor/debugging
再次感谢。该链接适用于 VS Code，但我使用的是完整的 VS 2017。您对此有任何信息吗？
好的，这是我的最后一击——从命令行，我们现在完全支持使用 --sourcemap 标志，它输出与 JavaScript 输出相对应的源映射文件。此文件将允许在启用源映射的浏览器和 Visual Studio 中直接调试原始 TypeScript 源。 blogs.msdn.microsoft.com/typescript/2012/11/15/…