Как заставить Webpack использовать уже существующие исходные карты при создании исходных карт? - PullRequest
Новая
       9

Как заставить Webpack использовать уже существующие исходные карты при создании исходных карт?

2 голосов
/ 23 июня 2019

У меня есть код JavaScript и исходные карты, сгенерированные из кода TypeScript (с использованием tsc).

Затем у меня второй этап компиляции, который связывает код, используя webpack.

Я включил исходные карты в webpack.config.js: 

module.exports = {
  devtool: "source-map"
}

Созданная исходная карта не совсем верна.

Webpack не учитывает существующие исходные карты, сгенерированные из кода TypeScript.

Это приводит к отображению кода JavaScript вместо кода TypeScript.

Как я могу получить исходную карту Webpack для включения существующего отображения?

EDIT:

После переименования моего вопроса и поиска переименованного вопроса в Google я нашел ответ.

Вы можете использовать предварительный загрузчик с веб-пакетом, который называется source-map-loader: https://webpack.js.org/loaders/source-map-loader/

Однако, после установки source-map-loader и обновления webpack.config.js до следующего, существующие исходные карты по-прежнему не используются: 

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
}

Я предполагаю, что поскольку файлы, на которые указывает моя существующая исходная карта, находятся вне каталога entry в webpack.config.js, они игнорируются ...?

1 Ответ

1 голос
/ 05 июля 2019

Если вы переносите машинописный текст как часть веб-пакета, вы получите исходные карты вместе с ним. 

devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ([
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: 'tsconfig.json' }
          },

вам нужен devTool: 'source-map' в веб-пакете и "sourceMap": true в tsconfig.json

devtool: 'cheap-module-eval-source-map', обеспечивает более быструю сборку для создания исходных карт в разработке. Но это сделает отображение источника встроенным. Так что не для производства.

Итак, большой вопрос. Почему шаг отделяется от веб-пакета?

Если вы используете компиляцию AOT с angular (с помощью команды ngc из @ anguler / compiler) и создаете файлы .map в папке aot, то вы хотите повторно использовать файлы карт. Я могу вам сказать, что я протестировал его для работы с решением ниже.

Тогда это заработает: 

  {
    test: /\.js$/,
    use: ["source-map-loader"],
    enforce: "pre"
  },

И важно, что у вас есть sourceMap: true в tsconfig и в минимизаторе, если вы его используете: 

    optimization: {
        minimizer: [
          new TerserPlugin({
cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }

У меня есть tsconfig.json в разработке tsconfig_ao1.json для команды ngc У меня есть tsconfig_ao2.json для компиляции с aot main.ts, используя папку aot. И я использую ngc вне webpack, потому что я не мог без проблем использовать @ ngtools / webpack внутри webpack.

Если вы делаете что-то еще, вы должны понимать, что source-map-load будет загружать исходные карты только в том случае, если проверяемые файлы имеют исходные карты и если файлы являются частью дерева, загруженного из записи. Должен быть импорт из файла main.ts в файл с исходным сопоставлением.

...