图示加载过程：
1.加载前
2.加载localhost下的文件
3.加载webpack-internal://
4.加载webpack://
5.加载完成
图示的加载过程是怎么来的
webpack-internal://
是由【图2】localhost 下的js/css文件中末尾的"sourceURL=webpack-internal:///..." 定义的
浏览器解析sourceURL=webpack-internal:///的步骤如下：
1. 加载页面和入口JS文件。这个过程和普通的网页加载过程一样，浏览器会获取HTML页面并加载入口JS文件。
2. 解析入口JS文件。浏览器会解析入口JS文件，并发现末尾带有sourceURL=webpack-internal:///的注释。
3. 解析sourceURL。浏览器会解析注释中的sourceURL。
4. 发送请求获取源码。浏览器会通过sourceURL指定的路径发送HTTP请求，获取源代码和相应的源映射文件。
5. 解析源代码。浏览器会解析获取的源代码，并将其显示在浏览器开发者工具的源代码窗格中。
6. 运行代码。浏览器会运行Javascript代码，并在运行时根据sourceURL的路径显示正确的源代码位置。
总之，sourceURL=webpack-internal:///注释通过将模块的ID和源代码路径附加到函数前缀中，使得浏览器能够自动获取源代码并在开发者工具中正确地展示代码位置。这是一个非常实用的调试工具，能够帮助开发者快速追踪并调试Javascript代码中的问题。
webpack://
是由【图3】webpack-internal:// 下的js/css文件中末尾的"sourceMappingURL=..." 定义的
浏览器是如何一步步解析sourceMappingURL=xxx ?
1. 首先，浏览器会读取HTML文件，解析出所有的JavaScript代码。
2. 当浏览器遇到sourceMappingURL=xxxxxxx，会认为这是一个source map链接地址。
3. 浏览器会请求该地址，获取source map文件。
4. source map文件会告诉浏览器如何将压缩后的JavaScript代码映射回原始的未压缩的JavaScript代码。
5. 浏览器会根据source map文件中的信息，将错误或警告的位置映射回原始的未压缩的JavaScript代码，从而方便调试。
原理
sourceMappingURL: (.map后缀的文件 或 Data URLs) 一个存储源代码与编译代码对应位置映射的信息文件，是给Chrome浏览器用的一个东西。
SourceMap 帮助我们将以下3种js/css等文件（人看不懂的源码），在控制台中转换成人看得懂的源码，从而进行 debug ：
- 代码压缩混淆后
- 利用 sass 、typeScript 等其他语言编译成 css 或 JS 后
- 利用 webpack 等打包工具进行多文件合并后
所以 webpack-internal:// 和 webpack:// 是浏览器一步一步根据SourceMap 找过去并逐一生成的。
