Инструмент разработки

Этот параметр управляет тем, генерируются ли карты исходных файлов и как.

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

devtool

string false

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

Репозиторий webpack содержит пример, демонстрирующий эффект всех devtool вариантов. Эти примеры, вероятно, помогут вам понять различия.

Вместо использования параметра devtool вы также можете использовать SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin напрямую, так как у него больше параметров. Никогда не используйте вместе параметр devtool и плагин. Параметр devtool добавляет плагин внутри, поэтому вы получите двойное применение плагина.

devtool	сборка	пересборка	производство	качество
(нет) самый быстрый	самый быстрый	самый быстрый	да	скомпилированный код
eval самый быстрый	самый быстрый	самый быстрый	нет	сгенерированный код
cheap-eval-source-map быстрый	быстрый	быстрее	нет	преобразованный код (только строки)
cheap-module-eval-source-map медленный	медленный	быстрее	нет	исходный код (только строки)
eval-source-map самый медленный	самый медленный	быстрый	нет	исходный код
cheap-source-map быстрый	быстрый	медленный	да	преобразованный код (только строки)
cheap-module-source-map медленный	медленный	медленнее	да	исходный код (только строки)
inline-cheap-source-map быстрый	быстрый	медленный	нет	преобразованный код (только строки)
inline-cheap-module-source-map медленный	медленный	медленнее	нет	исходный код (только строки)
source-map самый медленный	самый медленный	самый медленный	да	исходный код
inline-source-map самый медленный	самый медленный	самый медленный	нет	исходный код
hidden-source-map самый медленный	самый медленный	самый медленный	да	исходный код
nosources-source-map самый медленный	самый медленный	самый медленный	да	без содержимого исходного кода

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

Есть некоторые проблемы с картами исходных файлов в Chrome. Нам нужна ваша помощь!.

См. output.sourceMapFilename, чтобы настроить имена сгенерированных карт исходных файлов.

Характеристики

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, но после транспиляции Loaders. Например: Вместо import {test} from "module"; class A extends test {} вы видите что-то вроде import {test} from "module"; var A = function(_test) { ... }(test);.

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

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

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

Разработка

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

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

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

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

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

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

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

inline-source-map - Карта исходных файлов добавляется как DataUrl в пакет.

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

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

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

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

Производство

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

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

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

Вы должны настроить свой сервер, чтобы запретить доступ к файлу карты исходных файлов обычным пользователям!

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

Вы не должны развёртывать файл карты исходных файлов на веб-сервере. Вместо этого используйте его только для инструментов отслеживания ошибок.

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

Он по-прежнему раскрывает имена файлов и структуру для декомпиляции, но не раскрывает исходный код.

При использовании terser-webpack-plugin вы должны указать параметр sourceMap: true, чтобы включить поддержку карт исходных файлов.