如何在开发人员工具中获取 .ts 文件，同时在 angular2 中使用 webpack 作为模块捆绑器

Question

我正在使用 webpack 作为开发 angular2 应用程序的模块包。它创建捆绑.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" }
            ],
    },
}

Answer 1

使用源映射。

1. 在tsconfig.json中为 TypeScript 启用源映射生成：

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

2. 通过在生成的 JavaScript 文件中添加源映射链接，方法是在webpack.config.js中添加以下内容：

    module.exports = {
      devtool: 'source-map'
    };

3. 在开发工具中启用源映射(如果默认情况下未启用(。例如，在 Chrome 中，转到开发工具首选项：">源">"启用 JavaScript 源映射"。