javascript - 浏览器如何或从何处获取 "sourcemapped"javascript 文件的源文件？

Question

我正在开始一个现有项目的工作，该项目是使用 Angular JS 构建的。当我打开 chrome 开发工具“源代码” View 时，浏览器告诉我:

Source map detected...

我看到了这个:

在哪里

• inline.bundle.js
• main.bundle.js
• 等...

是编译后的文件，其原始文件在我圈出的源目录中，例如

• ng://
• webpack://
• 等..

浏览器没有显示对这些ng://、webpack://文件的任何网络请求，所以我的问题是，这些文件是从哪里来的？浏览器是如何获取这些数据的？

我猜服务器向浏览器发送了一个“sourcemap”文件，其中包含所有原始源代码及其相应的编译代码？然后浏览器解析 sourcemap 并为这些文件生成一个“虚拟”文件树——这就是为什么没有网络请求？ 这些"file"从何而来？

Answer 1

sourcemaps 可以被烘焙到原始的 JS 包中，尽管它通常不会在生产中完成。

它也可以是一个外部文件(通常在包的最后一行引用)。

Webpack 通过 devtool 允许所有这些不同的选项 config option .