javascript - 如何在 VS 2017 中调试 webpack TypeScript

Question

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

更新:当 webpack 不在组合中时，VS 中的 TypeScript 调试使用 IE 或 Chrome 可以正常工作。这是导致问题的 webpack 的添加。

Answer 1

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