什么是源地图？
很多代码会自动添加到用webpack打包的文件中，这对开发过程中进行调试非常不利
因为运行webpack打包的代码时，错误消息的内容也是打包文件的内容
因此，为了降低调试难度并提高错误代码的可读性，需要了解打包后代码与打包前代码之间的映射关系
有了这种映射关系，我们可以很好地显示错误提示的内容。 存储此映射关系的文件称为sourcemap
如何打开源映射
33559 www.web pack js.com/configuration/dev tool /
2.1添加到web pack.config.js
devtool: 'xxx '，
2.2各配置项的说明：
eval:
不会单独生成源映射文件，映射关系保存在打包的文件中，并保存在eval中
好处：最佳性能
缺点：业务逻辑复杂时，提示信息可能不完整且不正确
source-map:
将单独生成源映射文件，并将映射关系存储在单独的文件中
优势：提示信息全面，可直接导航到错误代码行和列
缺点：包装速度慢
inline:
不会单独生成源映射文件，映射关系保存在打包的文件中，并另存为base64字符串
cheap:
生成的映射信息只能放置在错误行中，不能放置在错误列中
模组：
我们希望不仅存储我们的代码映射关系，而且还存储第三方模块映射关系，以便在第三方模块发生错误时能够成功调试
2.3企业发展构成：
Evelopment : cheap-module-eval-source-map
只需要行错误消息，包含第三方模块错误消息，不生成单独的源映射文件
产品： cheap-module-source-map
您只需要行错误消息，它包含第三方模块错误消息并生成单独的sourcemap文件
dev工具
构建速度
重建速度
生产环境
质量) )
(无)
是
打包的代码
埃瓦尔
否
生成的代码
cheap-eval-source-map
否
转换的代码(仅限行)
cheap-module-eval-source-map
o
否
原始源代码(仅限行)
eval-source-map
--
否
源代码
cheap-source-map
o
否
转换的代码(仅限行)
cheap-module-source-map
o
_
否
原始源代码(仅限行)
在线芯片源映射
o
否
转换的代码(仅限行)
在线- cheap-module-source-map
o
_
否
原始源代码(仅限行)
源地图
--
--
是
源代码
在线资源图
--
--
否
源代码
隐藏资源图
--
--
是
源代码
否来源-来源-地图
--
--
是
没有源代码内容
————————————————
这是CSDN博客“weixin_39613548”的原创文章，符合CC 4.0 BY-SA版权协议。 请附上原文来源的链接和本声明。
原文链接： 3359 blog.csdn.net/weixin _ 39613548/article/details/111835289