Devtool

Этот параметр управляет тем, создаются ли и как создаются карты источников.

Используйте SourceMapDevToolPlugin для более тонкой настройки. См. source-map-loader для работы с существующими картами источников.

devtool

string = 'eval' false

Выберите стиль сопоставления источников для улучшения процесса отладки. Эти значения могут значительно повлиять на скорость сборки и пересборки.

devtool	производительность	production	качество	комментарий
(none)	сборка: самая быстрая пересборка: самая быстрая	да	пакет	Рекомендуемый выбор для сборок production с максимальной производительностью.
eval	сборка: быстрая пересборка: самая быстрая	нет	сгенерировано	Рекомендуемый выбор для сборок development с максимальной производительностью.
eval-cheap-source-map	сборка: нормально пересборка: быстрая	нет	преобразован	Компромиссный выбор для сборок development.
eval-cheap-module-source-map	сборка: медленная пересборка: быстрая	нет	оригинальные строки	Компромиссный выбор для сборок development.
eval-source-map	сборка: самая медленная пересборка: нормально	нет	оригинальный	Рекомендуемый выбор для сборок development с высококачественными SourceMaps.
cheap-source-map	сборка: нормально пересборка: медленная	нет	преобразован
cheap-module-source-map	сборка: медленная пересборка: медленная	нет	оригинальные строки
source-map	сборка: самая медленная пересборка: самая медленная	да	оригинальный	Рекомендуемый выбор для production сборок с высококачественными SourceMaps.
inline-cheap-source-map	сборка: нормально пересборка: медленная	нет	преобразован
inline-cheap-module-source-map	сборка: медленная пересборка: медленная	нет	оригинальные строки
inline-source-map	сборка: самая медленная пересборка: самая медленная	нет	оригинальный	Возможный выбор при публикации одного файла
eval-nosources-cheap-source-map	сборка: нормально пересборка: быстрая	нет	преобразован	исходный код не включен
eval-nosources-cheap-module-source-map	сборка: медленная пересборка: быстрая	нет	оригинальные строки	исходный код не включен
eval-nosources-source-map	сборка: самая медленная пересборка: нормально	нет	оригинальный	исходный код не включен
inline-nosources-cheap-source-map	сборка: нормально пересборка: медленная	нет	преобразован	исходный код не включен
inline-nosources-cheap-module-source-map	сборка: медленная пересборка: медленная	нет	оригинальные строки	исходный код не включен
inline-nosources-source-map	сборка: самая медленная пересборка: самая медленная	нет	оригинальный	исходный код не включен
nosources-cheap-source-map	сборка: нормально пересборка: медленная	нет	преобразован	исходный код не включен
nosources-cheap-module-source-map	сборка: медленная пересборка: медленная	нет	оригинальные строки	исходный код не включен
nosources-source-map	сборка: самая медленная пересборка: самая медленная	да	оригинальный	исходный код не включен
hidden-nosources-cheap-source-map	сборка: нормально пересборка: медленная	нет	преобразован	нет ссылки, исходный код не включен
hidden-nosources-cheap-module-source-map	сборка: медленная пересборка: медленная	нет	оригинальные строки	нет ссылки, исходный код не включен
hidden-nosources-source-map	сборка: самая медленная пересборка: самая медленная	да	оригинальный	нет ссылки, исходный код не включен
hidden-cheap-source-map	сборка: нормально пересборка: медленная	нет	преобразован	нет ссылки
hidden-cheap-module-source-map	сборка: медленная пересборка: медленная	нет	оригинальные строки	нет ссылки
hidden-source-map	сборка: самая медленная пересборка: самая медленная	да	оригинальный	нет ссылки. Возможный выбор при использовании SourceMap только для целей отчета об ошибках.

shortcut	explanation
performance: build	Как производительность начальной сборки зависит от настроек инструмента разработчика?
performance: rebuild	Как производительность инкрементальной сборки зависит от настроек инструмента разработчика? Медленные инструменты разработчика могут уменьшить цикл обратной связи в режиме наблюдения. Масштаб отличается от производительности сборки, поскольку, как и следовало ожидать, пересборки должны быть быстрее, чем сборки.
production	Есть ли смысл использовать этот инструмент разработчика для сборок в продакшене? Обычно no когда инструмент разработчика негативно влияет на пользовательский опыт.
quality: bundled	Вы увидите весь сгенерированный код фрагмента в одном блоке кода. Это необработанный выходной файл без какой-либо поддержки инструментов разработчика
quality: generated	Вы увидите сгенерированный код, но каждый модуль будет отображаться как отдельный файл кода в инструментах разработчика браузера.
quality: transformed	Вы увидите сгенерированный код после предварительной обработки загрузчиками, но до дополнительных преобразований webpack. Будут отображены только номера строк исходного кода, а информация о столбцах будет отброшена или не генерироваться. Это предотвращает установку точек останова в середине строк, что не работает вместе с минимизатором.
quality: original lines	Вы увидите исходный код, который вы написали, предполагая, что все загрузчики поддерживают SourceMapping. Будут отображены только номера строк исходного кода, а информация о столбцах будет отброшена или не генерироваться. Это предотвращает установку точек останова в середине строк, что не работает вместе с минимизатором.
quality: original	Вы увидите исходный код, который вы написали, предполагая, что все загрузчики поддерживают SourceMapping.
eval-* addition	генерировать SourceMap для каждого модуля и добавлять его через eval. Рекомендуется для разработки из-за улучшенной производительности пересборки. Обратите внимание, что существует проблема с защитником Windows, которая вызывает значительное замедление из-за проверки вирусов.
inline-* addition	встраивать SourceMap в исходный файл вместо создания отдельного файла.
hidden-* addition	нет ссылки на SourceMap. Когда SourceMap не развернут, но все еще должен быть сгенерирован, например, для целей отчетности об ошибках.
nosources-* addition	исходный код не включен в SourceMap. Это может быть полезно, когда необходимо ссылаться на исходные файлы (требуются дополнительные параметры конфигурации).

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

Качество

bundled code - Вы видите весь сгенерированный код как большой блок кода. Вы не видите модули, разделенные друг от друга.

generated code - Вы видите каждый модуль отдельно друг от друга, аннотированный именами модулей. Вы видите код, сгенерированный webpack. Пример: вместо import {test} from "module"; test(); вы видите что-то вроде var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();.

transformed code - Вы видите каждый модуль отдельно друг от друга, аннотированный именами модулей. Вы видите код до того, как webpack преобразует его, но после того, как загрузчики его транспилируют. Пример: вместо import {test} from "module"; class A extends test {} вы видите что-то вроде import {test} from "module"; var A = function(_test) { ... }(test);

original source - Вы видите каждый модуль отдельно друг от друга, аннотированный именами модулей. Вы видите код до транспиляции, как вы его написали. Это зависит от поддержки загрузчика.

without source content - Содержимое источников не включено в карты источников. Браузеры обычно пытаются загрузить источник с веб-сервера или файловой системы. Вы должны убедиться, что правильно установили output.devtoolModuleFilenameTemplate для соответствия URL-адресам источников.

(lines only) - Карты источников упрощены до одного сопоставления на строку. Обычно это означает одно сопоставление на оператор (предполагая, что вы написали его таким образом). Это предотвращает отладку выполнения на уровне операторов и установки точек останова в столбцах строки. Сочетание с минимизацией невозможно, поскольку минимизаторы обычно выдают только одну строку.

Разработка

Следующие параметры идеально подходят для разработки:

eval - Каждый модуль выполняется с eval() и //# sourceURL. Это довольно быстро. Главный недостаток заключается в том, что он не отображает номера строк правильно, поскольку он сопоставляется с транспилированным кодом, а не с исходным кодом (нет карт источников от загрузчиков).

eval-source-map - Каждый модуль выполняется с eval() и карта источников добавляется как DataUrl к eval(). Первоначально это медленно, но обеспечивает высокую скорость пересборки и дает реальные файлы. Номера строк правильно сопоставлены, поскольку они сопоставляются с исходным кодом. Он дает карты источников наилучшего качества для разработки.

eval-cheap-source-map - Аналогично eval-source-map, каждый модуль выполняется с eval(). Он «дешевый», потому что у него нет сопоставлений столбцов, он отображает только номера строк. Он игнорирует карты источников от загрузчиков и отображает только транспилированный код, аналогичный инструменту разработчика eval.

eval-cheap-module-source-map - Аналогично eval-cheap-source-map, однако в этом случае карты источников от загрузчиков обрабатываются для получения лучших результатов. Однако карты источников загрузчика упрощены до одного сопоставления на строку.

Особые случаи

Следующие параметры не подходят ни для разработки, ни для продакшена. Они необходимы для некоторых особых случаев, например, для некоторых сторонних инструментов.

inline-source-map - Карта источников добавляется как DataUrl к пакету.

cheap-source-map - Карта источников без сопоставлений столбцов, игнорирующая карты источников загрузчика.

inline-cheap-source-map - Аналогично cheap-source-map, но карта источников добавляется как DataUrl к пакету.

cheap-module-source-map - Карта источников без сопоставлений столбцов, которая упрощает карты источников загрузчика до одного сопоставления на строку.

inline-cheap-module-source-map - Аналогично cheap-module-source-map, но карта источников добавляется как DataUrl к пакету.

Продакшен

Эти параметры обычно используются в продакшене:

(none) (Опустите параметр devtool или установите devtool: false) - Карта источников не выводится. Это хороший вариант для начала.

source-map - Полная карта источников выводится как отдельный файл. Он добавляет комментарий со ссылкой в пакет, чтобы инструменты разработки знали, где его найти.

hidden-source-map - То же самое, что и source-map, но не добавляет комментарий со ссылкой в пакет. Полезно, если вы хотите, чтобы карты источников только сопоставляли трассировки стека ошибок из отчетов об ошибках, но не хотите предоставлять свою карту источников для инструментов разработки браузера.

nosources-source-map - Создается карта источников без sourcesContent в ней. Ее можно использовать для сопоставления трассировок стека на клиенте, не предоставляя весь исходный код. Вы можете развернуть файл карты источников на веб-сервере.