Question

我正在将TypeScript添加到当前所有JavaScript Web应用程序的构建过程中，该应用程序的构建过程围绕Webpack进行构造。我一直在关注TypeScript的Migrating from 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-loader（一种TypeScript加载程序）与source-map-loader结合使用，以方便调试。

Another article仅添加了一些额外信息：

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

最后，source-map-loader's own README说：

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

好的。因此source-map-loader会提取源映射并将其提供给Webpack。我的问题是，为什么它应该作为预加载器运行？根据上面的第二个引用，听起来source-map-loader应该从TypeScript中获取源映射输出。但是，如果它作为预加载器运行，it runs before normal loaders，而且我不明白它如何使用TypeScript的输出。

此外，我给人的印象是Webpack不处理中间文件-在配置中，source-map-loader仅加载.jsx?文件。这不是说source-map-loader根本不会在TypeScript编译结果上被调用吗？

1：请注意，此Webpack配置使用过时的语法，在module.loaders部分列出了常规加载程序，在module.preLoaders部分列出了预加载程序。这不会影响此问题的内容，同一站点的similar article上提供了具有当前语法的示例。

Answer 1

它与TypeScript编译本身没有任何关系，并且您不需要它来获取源映射以用于自己的源。但是，您可能出于以下原因而想要它，正如在source-map-loader自述文件中引用的引号之后的段落中所述：

当使用具有自己的源映射的第三方库时，此加载器特别有用。如果未提取并处理到webpack捆绑包的源地图中，浏览器可能会误解源地图数据。 source-map-loader允许webpack跨库维护源地图数据的连续性，从而保持调试的便利性。

它是预加载器的原因是因为必须在.js文件上对其进行最小化之前运行，因为这往往会删除内联源映射。由于它仅对.js个文件而不对.ts个文件起反应，因此在您的TypeScript文件被编译之前，即在将它们输出到.js个文件之后，它不会运行。

使用Webpack将Source-map-loader装入TypeScript编译的位置？

1 个答案: