Webpack5开发模式下资源请求所用app:// scheme是什么？

• 这个app://不是Webpack专属的自定义协议，是Chromium内核浏览器（Chrome、Edge等）DevTools内置的虚拟文件系统协议，专门用来承载开发模式下通过source map还原的、没有对应真实网络访问路径的本地源文件。
• 只在Webpack 5开发模式下出现，和默认的source map配置直接相关：Webpack 5在development模式下默认使用eval-cheap-module-source-map作为devtool配置项，这个配置会把每个模块的代码包裹在eval()调用中执行，同时内联对应模块的source map信息。DevTools解析这类eval包裹代码的source map时，不会把还原出的原始源文件挂靠在本地开发服务的域名（比如localhost:8080）路径下，而是统一挂载到app://虚拟根路径下，和页面实际加载的静态资源做区分，方便调试。
• 你在调试工具里看到的app://开头的资源请求不是真实发送的网络请求，是DevTools为了支持源文件浏览、断点调试虚拟出来的记录，实际运行的代码还是从本地webpack-dev-server拉取的打包后产物。
• 可以通过修改配置验证这个逻辑：把webpack配置中的devtool改成不带eval前缀的选项，比如cheap-module-source-map或者source-map，重启开发服务后，Sources面板里的源文件就会回归到本地开发服务的域名路径下，app://目录树会直接消失。

你观察到的app://路径资源格式如下：

app:///node_modules/dir/to/package/index.js

DevTools中对应的目录树展示：

网上相关资料少的原因很简单：这个虚拟协议属于DevTools和构建工具source map交互的内部实现细节，既不是Webpack对外公开的功能特性，也不是Web标准定义的协议，大部分开发者调试时只关注断点功能是否正常，不会特意深究路径前缀，所以公开讨论和相关记录都很少。

内容的提问来源于stack exchange，提问作者FullOfCaffeine