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

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

Answer 1

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

如何在VS 2017中调试webpacked TypeScript

1 个答案: