【webpack】如何使用sourcemap
相关文章
- webpack 的编译主流程
- webpack 配置文件
- webpack 配置参数
- 如何使用sourcemap
- 自定义loader
- 自定义plugin
- 实现静态资源的离线缓存
- 如何优化webpack配置
如何使用sourcemap
一、什么是sourcemap
SourceMap（源映射）是一种文件，它建立了转换后的代码和原始源代码之间的映射关系。在前端开发中，通常会对源代码进行压缩、合并、编译等操作，以提高性能和减少文件大小。然而，这种转换会使得在调试和定位问题时变得困难，因为转换后的代码与原始源代码之间的关系不再一一对应。
SourceMap的作用就是解决这个问题。它记录了转换后的代码的每一行与原始源代码的对应关系，以及可能的其他关联信息，比如变量名、函数名等。当浏览器在调试模式下运行时，它可以使用SourceMap文件将转换后的代码映射回原始源代码，从而方便开发者进行调试和定位问题。
二、sourcemap内容
一个典型的SourceMap文件是一个JSON格式的文件，包含了转换后的代码与原始源代码之间的映射关系，以及其他相关信息。它通常包括以下几个关键信息：
版本信息（version）： SourceMap文件的版本号。
文件映射信息（mappings）： 包含了转换后的代码与原始源代码之间的映射关系。这通常是一个由Base64 VLQ编码的字符串，其中记录了每个转换后的代码片段与原始源代码之间的映射关系。
源文件列表（sources）： 包含了原始源代码文件的列表。
源文件内容（sourcesContent）： 可选项，包含了原始源代码文件的内容。如果原始源代码文件很小，通常会将其内容直接嵌入到SourceMap中，以减少对源文件的额外请求。
其他辅助信息（names、file等）： 包含了一些额外的辅助信息，如转换后的代码中使用到的变量名称等。
三、开启sourcemap
vue-cli项目
在通过Vue CLI创建的项目中，你可以通过配置vue.config.js文件来配置生成SourceMap。
开启 SourceMap 后，构建会生成额外的 SourceMap 文件，用于将转换后的代码映射回原始源代码。SourceMap 文件通常以 .map 扩展名结尾，与转换后的代码文件处于相同的目录下，例如 main.js.map。这个文件记录了转换后的代码与原始源代码之间的映射关系。
二、启用、不启用对比
不启用
启用
对比发现，启用后，源文件底部会有一个包含sourcemap文件的映射注释信息，同时源码左侧面板多了一个目录。里面有该项目及构建工具对应的源码。
三、浏览器启用
在大多数现代的浏览器中，开发者工具都默认支持加载和使用 SourceMap 文件。你不需要手动启用 SourceMap 功能，通常只需要确保在开发环境中生成了正确的 SourceMap 文件，并且浏览器开发工具能够自动识别并加载这些文件。
当你在浏览器开发工具中打开调试器时，如果你的项目生成了正确的 SourceMap 文件，并且浏览器开发工具能够访问到这些文件，它会自动将转换后的代码映射回原始源代码。这样你就可以在浏览器开发工具中看到原始的、未经压缩和转换的源代码，以及相关的调试信息。
验证是否开启
四、使用体验
点击控制台日志
会直接定位到源码对应位置
在源码上断点
会直接定位到源码对应位置
