[Chrome] Devtools-Sources 中的webpack-internal: // 和 webpack:// 目录

标题不能超过64个有效字符
《[Chrome] Chrome Devtools - Sources 中的webpack-internal: // 和 webpack:// 目录》

近日有个前端项目在测试环境被检测出源码泄露风险，这个项目是vue2写的，vue-cli3作为脚手架。
看安全检测的报告，内容截图里，是Chrome Devtools - Sources下面有webpack-internal: //和 webpack://两个目录。在这两个目录下，直接点击文件，可以看到接近源码的代码。

情况类似于下图

印象里测试环境编译配置没有手动开启sourceMap，编译产物里不应该存在sourceMap文件。后来去检查了下network，也确实没有sourceMap文件(如xxx.js.map之类的文件)出现。

那么问题就出在webpack-internal: // 和 webpack:// 这两个目录。

本文先讲这两个文件夹是怎么来的。

被webpack打包之后的编译产物js/css文件中存在"sourceURL=webpack-internal:///xxx"字符串和"sourceMappingURL=xxx"字符串

webpack-internal://
缓存资源(这里是localhost) 中的js/css文件中，会有大量的"sourceURL=webpack-internal:///xxx"字符串(这个标识对应source中的 webpack-internal:// 目录)。

webpack://
缓存资源中的js/css文件中，也存在大量的"sourceMappingURL=xxx"字符串(这个标识对应source中的 webpack:// 目录)。

情况解析：
sourceURL和sourceMappingURL都是源代码与编译后代码之间的位置映射信息(dataURL)，这些信息开发人员看着没啥用，是给浏览器用的。(.map后缀的文件也有相同的作用)

浏览器可以利用sourceURL和sourceMappingURL提供的位置映射信息将压缩后的(可读性差的)js/css等文件，转换为可读性高的代码(类似于源码)显示在devtools - Sources下，从而便于开发人员进行debug。

总结：
webpack-internal:// 和webpack:// 目录，是浏览器遍历文件，解析解析dataURL信息(sourceURL和sourceMappingURL)后再逐一生成的。

完结。

同步更新到自己的语雀
https://www.yuque.com/diracke...