Какой метод использует webpack для отображения источников в папке 'webpack: //' в инструментах разработчика?

Question

Если я использую webpack в режиме разработчика, когда я открываю инструменты разработчика chrome, на вкладке «sources» я вижу папку «webpack: //» со всем моим исходным кодом.

Я хотел бы знать, как я могу сделать что-то подобное с моим собственным кодом (без веб-пакета).

Допустим, я хочу запрограммировать свою собственную систему сборки. Эта система сборки берет некоторый исходный код и передает его. Как я могу показать исходный код (включая файлы js, html и css) в специальной папке (например, «mysource: //»)?

Answer 1

Исходный код, который вы видите в вашем DevTool-окне, является так называемыми «исходными картами», в веб-пакете они генерируются (в большинстве случаев) SourceMapDevToolPlugin по умолчанию в режиме 'dev'.

Здесь - другая статья о том, как генерировать исходные карты.