在Webpack的TypeScript编译中，源代码地图加载器在哪里？

Question

我将TypeScript添加到当前全JavaScript web应用程序的构建过程中，该应用程序的构建过程是围绕Webpack构建的。我一直在关注打字稿的从JavaScript迁移文章，并对建议的Webpack配置提出了一个问题，为了您的方便，请将其复制如下：

module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "./dist/bundle.js",
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // Other options...
};

awesome-typescript-loader的存在当然是必需的，毕竟- we希望编译TypeScript。我的问题是关于source-map-loader，这里用作预加载器.这篇文章对其目的相当简洁，只说：

您可以使用awesome-typescript-loader ( TypeScript加载程序)和source-map-loader相结合，以便更容易地进行调试。

另一篇文章只添加了一些额外的信息：

这两个依赖关系将使TypeScript和Webpack在一起发挥得很好。awesome-typescript-loader帮助Webpack使用类型记录的标准配置文件tsconfig.json编译您的TypeScript代码。source-map-loader在生成自己的源代码地图时，使用TypeScript的任何源地图输出来通知webpack。这将允许您调试最终输出文件，就像调试原始TypeScript源代码一样。

最后，自己的自述说：

source-map-loader extracts现有源映射来自所有JavaScript条目。这包括内联源映射以及通过URL链接的源映射。所有源地图数据都传递给webpack，以便按照webpack.config.js中devtool选项指定的所选源地图样式进行处理。

好的。因此，source-map-loader摄取源地图并提供给Webpack。不过，我的问题是，它为什么要作为预加载程序运行呢？根据上面的第二个引用，听起来source-map-loader应该从TypeScript获取源地图输出。但是，如果它作为预加载程序运行，那么它在普通装载机前运行。，我不明白它如何使用来自TypeScript的输出。

此外，我的印象是Webpack不处理中间文件--在配置中，source-map-loader只加载.jsx?文件。这不意味着source-map-loader不会在TypeScript编译的结果中被调用吗？

1:请注意，这个Webpack配置使用了过时的语法，在module.loaders部分列出了普通加载程序，在module.preLoaders部分中列出了预加载器。这不影响这个问题的内容，在同一个站点的类似文章上有一个具有当前语法的示例。

Answer 1

它与TypeScript编译本身没有任何关系，您也不需要它来使源映射为您自己的源代码工作。但是，您可能出于以下原因而想要它，正如在您引用source-map-loader的自述文件之后的段落中提到的那样：

当使用第三方库有自己的源映射时，这个加载程序特别有用。如果不提取并处理到webpack包的源图中，浏览器可能会曲解源地图数据。源-地图加载器允许webpack保持源地图数据跨库的连续性，从而保持调试的方便性。

它之所以是预加载器，是因为在缩小.js文件之前必须在它们上运行，因为这往往会删除内联源映射。因为它只对.js文件作出反应，而不是在.ts文件上反应，所以在您的TypeScript文件被转移之前没有运行，而是在它们被输出到.js文件之后才运行。