Source Map
2022/9/4 6:22:51
本文主要是介绍Source Map,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.什么是Source Map
Source Map就是一个信息文件,里面储存着位置信息。也就是说Source Map文件中存储着压缩混淆后的代码,所对应的转换前的位置。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试
默认Source Map的问题
开发环境默认生成的Source Map,记录的是生成后的代码位置,会导致运行时报错的行数与源代码的行数不一致的问题。
解决默认Source Map的问题
开发环境下,推荐在webpack.config.js中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致:
module.exports = { mode:'development', //eval-source-map 仅限在‘开发模式’下使用,不建议在‘生成模式’下使用 //此选项生成的Source Map能够保证”运行时报错的行数“与:源代码的行数”保持一致 devtool:'eval-source-map', //省略其它配置项 }
webpack生产环境下的Source Map
在生产环境下,如果省略了devtool 选项,则最终生成的文件中不包含Source Map,这能够防止原始代码通过Source Map的形式暴露给别有所图之人。
只定位行数,不暴露源码
//建议开发环境使用 devtool:'eval-source-map', //只定位行号,不显示代码,建议正式环境使用,或直接不使用 devtool:'nosoures-source-map', 4.sourceMap的最佳实践 1.开发环境下: 建议把devtool的值设置为eval-source-map 好处:可以精准定位到具体的错误行 2.生产环境下: 建议关闭Source Map 或将devtool的值设置为nosources-source-map 好处:防止源码泄露,提高网站的安全性这篇关于Source Map的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升