第五十八篇:webpack的Source Map
好家伙,Source Map没听过
1.什么是Source Map?
字面意义上来看应该是个好东西
Source Map 就是一个信息文件,里面储存着位置信息。
也就是说,Source Map 文件中存储着压缩混淆后的代码所对应的转换前的位置。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,
能够极大的方便后期的调试。
2.为什么需要Source Map?
Source Map好东西,一般如果在源文件中语法出现了错误,打错字母了,
源文件和打包后文件中代码对应的行数是不一致的,所以我们有了这个工具Source Map
3.关于Source Map的设置
解决默认 Source Map的问题
开发环境下,推荐在webpack.config.js
中添加如下的配置,
即可保证运行时报错的行数与源代码的行数保持一致:
module.exports={
mode: 'development',
\\eval-source-map 仅限在“开发模式”下使用,不建议在“生产模式”下使用。
\\此选项生成的 Source Map 能够保证“运行时报错的行数"与“源代码的行数”保持一致
devtool: 'eval-source-map',
\\省略其它配置项...
}
4.Source Map的devtool属性可选项:
4.1.只暴行数,不暴代码的折中方案
devtool: 'nosources-source-map',
4.2.省略了devtool选项,则最终生成的文件中不包含Source Map
5.Source Map的最佳实践
5.1.开发环境下:
建议把 devtool的值设置为 eval-source-map
好处:可以精准定位到具体的错误行
5.2.生产环境下:
建议关闭 Source Map 或将 devtool的值设置为 nosources-source-map
好处:防止源码泄露,提高网站的安全性
That's all