Плагин SourceMapDevToolPlugin

Этот плагин обеспечивает более точный контроль над генерацией карты исходных кодов. Он также автоматически включается определёнными настройками опции конфигурации devtool.

new webpack.SourceMapDevToolPlugin(options);

Параметры

Поддерживаются следующие параметры:

• test (string RegExp [string, RegExp]): Включать карты исходных кодов для модулей на основе их расширения (по умолчанию .js, .mjs, и .css).

• include (string RegExp [string, RegExp]): Включать карты исходных кодов для путей модулей, соответствующих заданному значению.

• exclude (string RegExp [string, RegExp]): Исключать модули, соответствующие заданному значению, из генерации карты исходных кодов.

• filename (string): Определяет имя выходного файла карты исходных кодов (будет встроенным, если значение не предоставлено).

• append (string function false): Добавляет заданное значение к исходному ресурсу. Обычно комментарий #sourceMappingURL заменяется URL адресом файла карты исходных кодов. Начиная с webpack v4.36.0, поддерживаются параметры пути: [chunk], [filename] и [contenthash]. Установка append в false отключает добавление.

  Начиная с версии 5.84.0, webpack позволяет опции append быть функцией, принимающей данные пути и объект информации об активах в качестве аргументов и возвращающей строку.

  (pathData: PathData, assetInfo?: AssetInfo) => string;

• moduleFilenameTemplate (string): См. output.devtoolModuleFilenameTemplate.

• fallbackModuleFilenameTemplate (string): См. ссылку выше.

• namespace (string): См. output.devtoolNamespace.

• module = true (boolean): Указывает, должны ли загрузчики генерировать карты исходных кодов.

• columns = true (boolean): Указывает, должны ли использоваться сопоставления столбцов.

• noSources = false (boolean): Препятствует включению содержимого исходного файла в карту исходных кодов.

• publicPath (string): Выводит абсолютные URL-адреса с префиксом пути к общедоступным ресурсам, например, https://example.com/project/.

• fileContext (string): Делает аргумент [file] относительным к этому каталогу.

• sourceRoot (string): Предоставляет пользовательское значение для свойства sourceRoot в карте исходных кодов.

Опция fileContext полезна, когда вы хотите хранить карты исходных кодов в каталоге верхнего уровня, чтобы избежать отображения ../../ в абсолютном [url].

Примеры

Следующие примеры демонстрируют некоторые распространённые варианты использования этого плагина.

Базовый пример

Вы можете использовать следующий код для замены конфигурационной опции devtool: inline-source-map эквивалентной пользовательской конфигурацией плагина:

module.exports = {
  // ...
  devtool: false,
  plugins: [new webpack.SourceMapDevToolPlugin({})],
};

Исключение карт вендоров

Следующий код исключил бы карты исходных кодов для любых модулей в сборке vendor.js:

new webpack.SourceMapDevToolPlugin({
  filename: '[file].map[query]',
  exclude: ['vendor.js'],
});

Внешнее размещение карт исходных кодов

Установите URL-адрес для карт исходных кодов. Полезно для размещения их на хосте, требующем авторизации.

new webpack.SourceMapDevToolPlugin({
  append: '\n//# sourceMappingURL=https://example.com/sourcemap/[url]',
  filename: '[file].map[query]',
});

А для случаев, когда карты исходных кодов хранятся в каталоге верхнего уровня:

project
|- dist
  |- public
    |- bundle-[hash].js
  |- sourcemaps
    |- bundle-[hash].js.map

С следующей конфигурацией:

new webpack.SourceMapDevToolPlugin({
  filename: 'sourcemaps/[file].map',
  publicPath: 'https://example.com/project/',
  fileContext: 'public',
});

Создаст следующий URL:

https://example.com/project/sourcemaps/bundle-[hash].js.map