Source map в сборке Webpack представляет собой промежуточное соответствие между скомпилированным кодом и исходными файлами. Основная задача — восстановление оригинальной структуры исходного кода при отладке, даже если в браузере исполняется сильно преобразованный bundle.
В Webpack существует два уровня управления source maps:
devtoolSourceMapDevToolPluginНесмотря на то, что они решают одну задачу, архитектурно они находятся на разных уровнях абстракции и имеют разные сценарии применения.
devtool — это высокоуровневый конфигурационный параметр
Webpack, который управляет генерацией source maps через предопределённые
режимы.
Примеры:
evalsource-maphidden-source-mapcheap-source-mapinline-source-mapeval-cheap-module-source-mapКаждый режим представляет собой набор внутренних решений:
Ключевая особенность devtool заключается в том, что это
шаблон поведения, а не точная конфигурация.
Webpack интерпретирует строку и автоматически:
Таким образом, devtool — это декларативный интерфейс,
скрывающий внутреннюю сложность цепочки source map генерации.
SourceMapDevToolPlugin — это прямой инструмент
конфигурации генерации source maps. Он используется, когда требуется
полный контроль над тем, как и где создаются карты.
В отличие от devtool, он:
Пример базовой конфигурации:
new SourceMapDevToolPlugin({
filename: '[file].map',
append: '\n//# sourceMappingURL=[url]',
moduleFilenameTemplate: '[resource-path]',
fallbackModuleFilenameTemplate: '[resource-path]?[hash]'
})SourceMapDevToolPlugin позволяет управлять:
testexcludeЭто делает его инструментом уровня архитектуры сборки, а не просто отладки.
devtool:
SourceMapDevToolPlugin:
devtool ограничивает разработчика заранее определёнными
сценариями:
SourceMapDevToolPlugin позволяет:
devtool в production часто заменяется или
отключается:
source-map — полные картыhidden-source-map — генерация без публикации
ссылкиfalse — полное отключениеSourceMapDevToolPlugin позволяет реализовать более
сложные сценарии:
При использовании devtool Webpack фактически преобразует
строковое значение в конфигурацию одного из внутренних плагинов:
EvalSourceMapDevToolPluginSourceMapDevToolPluginВыбор зависит от режима.
Пример логики:
eval → eval-based wrappersource-map → полноценные .map файлыinline-source-map → base64 внутри bundlehidden-source-map → генерация без ссылкиТаким образом, devtool — это фасад над внутренними
плагинами, а не самостоятельный механизм.
Особое значение имеет eval-семейство режимов:
evaleval-source-mapeval-cheap-source-mapВ этих режимах Webpack:
evalЭто отличается от SourceMapDevToolPlugin, который:
Выбор devtool напрямую влияет на:
Наиболее затратные режимы:
source-mapinline-source-mapНаиболее быстрые:
evaleval-cheap-module-source-mapПоскольку плагин работает на уровне генерации ассетов, он:
exclude и
testОднако он более предсказуем в больших проектах, где важна контрольная точность.
Использование devtool и
SourceMapDevToolPlugin одновременно приводит к:
Webpack в таких случаях отдаёт приоритет плагину, так как он находится на более низком уровне.
Архитектурно выбор между двумя подходами определяется уровнем контроля:
devtool применяется когда:
SourceMapDevToolPlugin применяется когда:
Source maps зависят не только от Webpack, но и от:
babel-loaderts-loadersass-loaderКаждый loader может:
devtool и SourceMapDevToolPlugin лишь
агрегируют результат этой цепочки, но не заменяют её.
Браузерные devtools используют source maps для:
Разница конфигураций влияет на:
SourceMapDevToolPlugin чаще используется в сложных
системах, где важно: