VS2017で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フォルダに

/src 
/dist 

として編成されています。ここに私のconfigsです.tsファイルと、typescriptコンパイラが（ts-loaderを介して）作成するpre-webpack jsと.mapファイル。 distフォルダには、インラインソースマップを持つwebpacked jsがあります。 webpacked jsは私のHTMLページによって参照されます。 VSでプロジェクトを実行し、元の.tsファイルにブレークポイントを設定すると、ブレークポイントには「ブレークポイントは現在ヒットしません。このドキュメントのシンボルはロードされていません。もちろん、それはヒットしません。元のTypeScriptでソースマップをデバッグできるようにするにはどうすればよいですか？

更新：VSでのタイプスクリプトのデバッグは、webpackが混在していないときにIEまたはChromeを使用して正常に動作します。それは問題を引き起こしているwebpackの追加です。

Answer 1

角度クリティカルを使用していると仮定します。ローカルホスト：4200でng serveブラウザを開き、ページを検査します。 webpack/src/fileyouwanttodebugを見つけて、ブレークポイントを置き、ページを更新してください。