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

Question

当我在 Chrome 调试器中检查我的应用程序时，我只看到 webpack 的原始输出源 js 捆绑文件。我希望看到我的 typescript 文件出现在我的 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"]
    }
};

应用程序目录结构:

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 中调试和运行时，我看到:

请注意，这里没有 typescript 文件，js 文件的内容是 webpack 的原始输出。似乎没有 map 文件可以工作。

在 webpack 的输出中我看到:

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

Answer 1

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