如何在VS 2017中調試webpacked 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文件和typescript編譯器創建的pre-webpack js和.map文件（通過ts-loader）。 在dist文件夾中，我得到了帶有內聯源映射的webpacked js。 我的html頁面引用了webpacked js。 當我在VS中運行項目並在原始.ts文件中設置斷點時，斷點顯示“斷點當前不會被命中。此文檔沒有加載任何符號。” 當然它沒有被擊中。 如何使源映射工作以便能夠在我的原始TypeScript中進行調試？

更新：當webpack不在混合中時，VS中的TypeScript調試可以正常使用IE或Chrome。 這是導致問題的webpack的添加。

Answer 1

假設您正在使用angular cli：run ng serve在localhost：4200上打開瀏覽器並檢查頁面。 找到webpack / src / fileyouwanttodebug，放置斷點和刷新頁面