Javascript 为什么不是'；是否使用my.map文件创建Web包？

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

//
“严格使用”；
var path=require（'path'）；
module.exports={
devtool：“源地图”，
上下文：_dirname+“/Scripts/App”，
条目：'./index.ts'，
输出：{
文件名：“index.js”，
路径：_dirname+'/Build/'
},
模块：{
规则：[
{
强制执行：“预”，
测试：/\.tsx？$/,，
加载器：“源地图加载器”，
},
{
强制执行：“预”，
测试：/\.jsx？$/,，
使用：“源地图加载器”
},
{
测试：/\.jsx？$/,，
加载器：“巴别塔加载器”，
排除：/node_模块/，
},
{
测试：/\.tsx？$/,，
加载器：“ts加载器”，
排除：/node_模块/，
}
]
},
决心：{
扩展名：[“.ts”、“.tsx”、“.js”、“.jsx”]
}
};

应用程序目录结构：

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

根目录
/建造
/剧本
/应用程序
/模型
性别
Person.ts
index.ts您的typescript文件存储在
webpack://
文件夹中，只需查看其中的内容。或者，要在Chrome开发工具中快速搜索文件，请按
ctrl+p
，然后键入要查找的文件名。请注意，您只能在html文件中指定的文件夹路径中看到下载的文件，例如，在您的情况下，任何其他文件都不会显示在那里，因为您告诉浏览器加载
Build
文件夹中的
index.js
，它出现在
localhost:56085/Build
下面，当然，你的打字脚本文件没有列在那里，因为你没有将它们包括在你的html文件中，即使你这样做了，浏览器也不会理解它们。找到typescript文件后，可以添加断点，浏览器将正确映射回该文件，因为您的webpack配置文件中有选项
devtool:“source map”
，所以我对tsc从tsconfig创建的.js和.map文件感到困惑。这些文件放在我的.ts文件旁边，看起来毫无意义。网页包的输出不是浏览器得到的吗？为什么还要使用tsconfig？另外，你提到的chrome中webpack目录下我的ts文件中的断点没有被命中。如果我在webpack输出js文件中放置一个断点并单步执行，那么ts文件将被命中。但是如果我在ts文件上只有一个断点，它就不会被击中。您的
.map
文件应该位于相应的javascript文件所在的位置，以便调试工作。Webpack是一个模块绑定器/加载器，它将您的
import
语句转换为函数调用以加载请求的模块，无论Webpack生成什么，都是您提供给浏览器的内容，而不是typescript文件，
tsconfig.json
是typescript transpiler的一个配置文件，让它知道如何传输您的typescript文件，例如，您的目标javascript版本是什么，es5或es6，等等，它决定了您将在输出文件中看到来自tsc服务器的输出，所以我的构建目录中只有bundled.js文件而没有其他文件，这没关系吧？然后我的原始.ts文件将其传输的.js文件和tsc输出的.js.map文件放在旁边？老实说，您不应该担心输出的位置，只要在html文件中包含.js文件时.js和.map文件在同一目录中，调试就应该可以工作，你的typescript文件可以在任何地方找到，浏览器并不关心，它只关心你的.js文件和sourcemap@ruffin如果使用TypeScript编译器
tsc
（并且不使用Webpack）传输TypeScript代码，而不指定生成目录，然后，TypeScript在链接的视频中，在与原始TypeScript源文件相同的位置输出生成的JavaScript文件，这似乎是因为生成的JavaScript文件没有网页“指令”