Плагин 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): Добавляет заданное значение к исходному файлу. Обычно комментарий #sourceMappingURL. [url] заменяется URL-адресом файла карты исходного кода. Начиная с webpack v4.36.0, поддерживаются параметры пути: [chunk], [filename] и [contenthash]. Установка append в false отключает добавление.
• moduleFilenameTemplate (string): См. output.devtoolModuleFilenameTemplate.
• fallbackModuleFilenameTemplate (string): См. ссылку выше.
• namespace (string): См. output.devtoolNamespace.
• module = true (boolean): Указывает, должны ли загрузчики генерировать карты исходного кода.
• columns = true (boolean): Указывает, следует ли использовать сопоставления столбцов.
• lineToLine (boolean object): Упростить и ускорить сопоставление исходного кода, используя линию к строке сопоставления исходного кода для соответствующих модулей.
• noSources = false (boolean): Предотвращает включение содержимого файла исходного кода в карту исходного кода.
• publicPath (string): Выводит абсолютные URL-адреса с префиксом общедоступного пути, например, https://example.com/project/.
• fileContext (string): Делает аргумент [file] относительным к этому каталогу.
• sourceRoot (string): Предоставляет пользовательское значение для свойства sourceRoot в карте исходного кода.

Объект lineToLine позволяет использовать те же параметры test, include, и exclude, что описаны выше.

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

Устанавливая module и/или columns в false, вы получите менее точные карты исходного кода, но это значительно улучшит производительность компиляции.

Если вы хотите использовать пользовательскую конфигурацию для этого плагина в режиме разработки, убедитесь, что отключили стандартную. Т. е. установите devtool: false.

Помните, что при использовании TerserPlugin, необходимо использовать параметр sourceMap.

Примеры

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

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

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

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

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

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

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

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

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

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

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

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