source-map-loader在哪里适合使用Webpack进行TypeScript编译？

Question

我正在将TypeScript添加到当前所有JavaScript Web应用程序的构建过程中,其构建过程围绕Webpack构建.我一直在关注TypeScript的从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当然需要存在- 毕竟我们想要编译TypeScript.我的问题是source-map-loader,这里用作预装载器.这篇文章很简洁,只说:

您可以使用awesome-typescript-loaderTypeScript加载器,source-map-loader以便于调试.

另一篇文章只增加了一些额外的信息:

这两种依赖关系都可以让TypeScript和Webpack很好地协同工作.awesome-typescript-loader帮助Webpack使用TypeScript的标准配置文件编译您的TypeScript代码tsconfig.json.source-map-loader使用TypeScript的任何源映射输出在生成自己的源映射时通知webpack.这将允许您调试最终输出文件,就像调试原始TypeScript源代码一样.

最后,source-map-loader自己的README说:

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

好.因此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 包的源映射中，浏览器可能会误解源映射数据。source-map-loader 允许 webpack 保持跨库的源映射数据连续性，从而保留调试的简便性。

它是预加载器的原因是因为它必须在.js文件缩小之前在文件上运行，因为这往往会删除内联源映射。由于它只对.js文件而不是.ts文件做出反应，因此在 TypeScript 文件被转译之前不会运行，而是在它们输出到.js文件之后立即运行。