В чем смысл "стиля прагмы" в webpack?

Ответ 1

Различные браузеры требуют разных форматов для указания исходных карт. Если ваш браузер не показывает исходные файлы для файлов webpack'd, вы можете изменить этот параметр, чтобы сделать его совместимым с вашим браузером.

Ответ 2

Чтобы быть более откровенным в этом вопросе, "прагма", на которую ссылается, представляет собой последовательность символов, которые означают метаданные в браузере. В этом случае метаданные сообщают браузеру, где нужно извлечь файл исходной карты, если он решит загрузить его (например, когда пользователь открывает инструменты браузера dev).

Как указано в ссылке sirlancelot, стандартным форматом для прагмы является использование комментария следующей формы, начиная с //#:

//# sourceMappingURL=/path/to/file.js.map

В последних версиях Webpack, если вы не укажете символ прагмы в настройке devtool, по умолчанию он будет использовать символ # после символов комментария, как показано выше.

Однако в старых версиях Webpack символ прагмы, используемый по умолчанию, равен @, что приведет к комментарию формы:

//@ sourceMappingURL=/path/to/file.js.map

Использование формы //@ в недавнем браузере приведет теперь к предупреждению об отставке в консоли браузера (по крайней мере, в Chrome).

Если вам нужно поддерживать более старый браузер, вы можете переопределить прагму по умолчанию, указав свой параметр devtool на нужный символ, например:

devtool: "@source-map"

или явно указать # с помощью:

devtool: "#source-map"

но он чище IMO, чтобы просто оставить символ префикса и позволить Webpack добавить значение по умолчанию, указав его как:

devtool: "source-map"