javascript - webpack 使用什么方法在开发工具的“webpack://”文件夹中显示源代码？

Question

如果我在开发模式下使用 webpack，当我打开 chrome 开发工具时，在“源”选项卡中，我可以看到一个包含所有源代码的“webpack://”文件夹。

我想知道如何用我自己的代码（没有 webpack）做类似的事情。

假设我想编写自己的构建系统。这个构建系统需要一些源代码然后转译它。如何在特殊文件夹（例如“mysource://”）中显示原始源代码（包括 js、html 和 css 文件）？

标签： javascriptwebpackbuildsource-maps

Answer 1

您在 DevTool 窗口中看到的源代码被称为“source-maps”，在 webpack 中，它们是由SourceMapDevToolPlugin 在“dev”模式下默认生成的（在大多数情况下）。

这是另一篇关于如何生成源映射的文章。