如何在angular2中使用webpack作为模块绑定器时在开发者工具中获取.ts文件

我使用webpack作为模块包来开发angular2应用程序。它创建了bundle.js文件。我无法在开发工具中获取.ts文件以便调试它。有解决方案吗

          //var ExtractTextPlugin = require("extract-text-webpack-plugin");

    module.exports = {
        entry: {
            'app': "./App/main.ts",
            'employee': "./App/EmployeeModule/employee.module",
            'supplier': "./App/SupplierModule/supplier.module",
            'product': "./App/ProductModule/product.module"
        },
        output: {
            path: __dirname + "/dist",
            filename: "[name].js",
            chunkFilename: "[id].chunk.js",
            publicPath: "/dist/",
        },
        resolve: {
            extensions: [".ts", ".js", ".json"]
        },
        module: {
            rules:
                [
                    {
                        test: /\.ts$/, loaders: ["ts-loader", "angular2-template-loader", "angular2-router-loader"]
                    },
                    {
                        test: /\.html$/, loader: "html-loader"
                    },
                    {
                        test: /\.css$/, loaders: ['style-loader', 'css-loader']             },

                {
                    test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader"
                },
                { test: /\.js$/, loader: "source-map-loader" }
            ],
    },

}

使用

在

tsconfig.json

中为TypeScript启用源映射生成：

{
  "compilerOptions": {
    ...
    "sourceMap": true
  }
}

通过在

webpack.config.js

中添加此链接，在生成的JavaScript文件中添加sourcemaps链接：

module.exports={
devtool:“源映射”
};

如果默认情况下未启用，请在开发工具中启用源映射。例如，在Chrome中，进入开发工具首选项：Sources>EnableJavaScript源映射