Где исходный-map-loader вписывается в компиляцию TypeScript с помощью Webpack?

Я добавляю TypeScript в процесс сборки в настоящее время полностью веб-приложения с JavaScript, процесс сборки которого структурирован вокруг Webpack. Я следовал статье Миграция с JavaScript, и у меня есть вопрос о предлагаемой конфигурации Webpack¹, скопированный ниже для вашего удобства:

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

    // Enable sourcemaps for debugging webpack 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 для упрощения отладки.

Другая статья добавляет лишь немного дополнительной информации:

Обе эти зависимости позволят TypeScript и Webpack хорошо играть вместе. awesome-typescript-loader помогает Webpack скомпилировать ваш код TypeScript с помощью стандартного файла конфигурации TypeScripts с именем tsconfig.json. source-map-loader использует любые выходные данные исходной карты из TypeScript для информирования веб-пакета при создании своих собственных исходных карт. Это позволит вам отладить ваш конечный выходной файл, как если бы вы отлаживали свой исходный код TypeScript.

Наконец, source-map-loader собственный README говорит:

source-map-loader extracts существующие исходные карты из всех записей JavaScript. Это включает в себя как встроенные исходные карты, так и те, которые связаны через URL. Все исходные данные карты передаются в веб-пакет для обработки в соответствии с выбранным стилем исходной карты, заданным параметром 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. Это не влияет на содержание этого вопроса, и пример с текущим синтаксисом можно найти в аналогичной статье на том же сайте.

Ответ 1