Загрузчик source-map

Извлекает карты исходного кода из существующих исходных файлов (из их sourceMappingURL).

Начало работы

Для начала необходимо установить source-map-loader:

npm i -D source-map-loader

или

yarn add -D source-map-loader

или

pnpm add -D source-map-loader

Затем добавьте плагин в вашу конфигурацию webpack. Например:

file.js

import css from "file.css";

webpack.config.js

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

Загрузчик source-map-loader извлекает существующие карты исходного кода из всех JavaScript-входных точек. Это включает как встроенные карты исходного кода, так и те, которые связаны через URL. Все данные о картах исходного кода передаются в webpack для обработки в соответствии с выбранным стилем карты исходного кода, указанным параметром devtool в webpack.config.js. Этот загрузчик особенно полезен при использовании сторонних библиотек с собственными картами исходного кода. Если они не извлечены и не обработаны в карту исходного кода пакета webpack, браузеры могут неправильно интерпретировать данные карты исходного кода. source-map-loader позволяет webpack поддерживать непрерывность данных карты исходного кода между библиотеками, сохраняя простоту отладки. Загрузчик source-map-loader будет извлекать данные из любого JavaScript-файла, включая файлы в каталоге node_modules. Следите за настройкой правил include и exclude для максимального повышения производительности сборки.

И запустите webpack с помощью выбранного вами метода.

Параметры

filterSourceMappingUrl

Тип: Function По умолчанию: undefined

Позволяет указать поведение загрузчика для комментария SourceMappingURL.

Функция должна вернуть одно из значений:

• true или 'consume' — использовать карту исходного кода и удалить комментарий SourceMappingURL (поведение по умолчанию)
• false или 'remove' — не использовать карту исходного кода и удалить комментарий SourceMappingURL
• skip — не использовать карту исходного кода и не удалять комментарий SourceMappingURL

Пример конфигурации:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: [
          {
            loader: "source-map-loader",
            options: {
              filterSourceMappingUrl: (url, resourcePath) => {
                if (/broker-source-map-url\.js$/i.test(url)) {
                  return false;
                }

                if (/keep-source-mapping-url\.js$/i.test(resourcePath)) {
                  return "skip";
                }

                return true;
              },
            },
          },
        ],
      },
    ],
  },
};

Примеры

Игнорирование предупреждений

Для игнорирования предупреждений можно использовать следующую конфигурацию:

webpack.config.js

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

Дополнительную информацию о параметре ignoreWarnings можно найти здесь.

Участие в разработке

Пожалуйста, ознакомьтесь с нашими руководящими принципами по участию в разработке, если вы этого еще не сделали.

CONTRIBUTING

Лицензия

MIT