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

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"]
    }
};

應用目錄結構：

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

構建時，打字稿編譯會將* .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'