Question

当我在Chrome调试器中检查我的应用程序时，我只看到webpack的原始输出源js捆绑文件。我希望看到我的IDE中出现的打字稿文件，甚至是一个更漂亮的javascript文件，但这些都不起作用。这就是我所拥有的：

在Visual Studio 2017中运行。

tsconfig.json：

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js：

/// <binding BeforeBuild='Run - Development' />
"use strict";

var path = require('path');

module.exports = {
    devtool: "source-map",
    context: __dirname + "/Scripts/App",
    entry: './index.ts',
    output: {
        filename: "index.js",
        path: __dirname + '/Build/'
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.tsx?$/,
                loader: "source-map-loader",
            },
            {
                enforce: "pre",
                test: /\.jsx?$/,
                use: "source-map-loader"
            },
            {
                test: /\.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    }
};

App目录结构：

Root
  /Build
  /Scripts
    /App
      /Models
        Gender.ts
        Person.ts
      index.ts <-- entry point
tsconfig.json
webpack.config.json

当我构建时，typescript编译将* .js和* .js.map文件放在〜/ Scripts / App /目录中。

然后webpack完成它并将index.js放在〜/ Build /目录中。

当我在Chrome中调试并运行时，我看到：

注意没有打字稿文件，js文件的内容是webpack的原始输出。没有地图文件似乎有效。

在webpack的输出中，我看到：

sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZX.........

Answer 1

您的打字稿文件存储在webpack://文件夹中，只需查看其中。或者，要在Chrome开发工具中快速搜索文件，请按ctrl + p，然后输入您要查找的文件的名称。请注意，您只能在html文件中指定的文件夹路径中看到已下载的文件，其他任何文件都不会显示在那里，例如，在您的情况下，因为您告诉浏览器加载位于index.js文件夹内的Build，它会显示在localhost:56085/Build下的屏幕截图中，当然你的打字稿文件没有列在那里，因为你没有将它们包括在你的html文件，即使你这样做，浏览器也无法理解它们。找到打字稿文件后，您可以添加断点，浏览器将正确映射回来，因为您的webpack配置文件中有devtool: 'source-map'选项

为什么webpack使用我的.map文件？

1 个答案: