共计 1069 个字符，预计需要花费 3 分钟才能阅读完成。
题目不能超过 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…