使用Webpack将Source-map-loader装入TypeScript编译的地方？

Where does source-map-loader fit into TypeScript compilation with Webpack?

我正在将TypeScript添加到当前全JavaScript Web应用程序的构建过程中，该应用程序的构建过程围绕Webpack进行构造。我一直在关注TypeScript \\从JavaScript进行迁移，并且对建议的Webpack配置有疑问？1，为方便起见，下面复制了以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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的信息，这里用作预加载器。这篇文章的目的很简洁，只说：

You can use awesome-typescript-loader, a TypeScript loader, combined with source-map-loader for easier debugging.

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

Both of these dependencies will let TypeScript and Webpack play well together. awesome-typescript-loader helps Webpack compile your TypeScript code using the TypeScripta€?s standard configuration file named tsconfig.json. source-map-loader uses any sourcemap outputs from TypeScript to inform webpack when generating its own sourcemaps. This will allow you to debug your final output file as if you were debugging your original TypeScript source code.

最后，source-map-loader \\自己的自述文件说：

source-map-loader extracts existing source maps from all JavaScript entries. This includes both inline source maps as well as those linked via URL. All source map data is passed to webpack for processing as per a chosen source map style specified by the devtool option in 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部分中列出了预加载程序。这不会影响此问题的内容，同一站点上的类似文章中提供了具有当前语法的示例。