Source Map

Source Map 就是一个信息文件,里面存储着位置信息,Source Map 文件中存储着压缩混淆后的代码,所对应的转换前的位置

有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,极大的方便后期的调试

 

开发模式下

默认Source Map 问题

开发环境下默认生成的 Source Map 记录的是生成后的代码的位置,会导致运行时报错的行数与源代码的行数不一致的问题

解决默认Source Map 问题

开发环境下,在 webpack.config.js 中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致

module.exports = {
    //在开发调试阶段 建议把 devtool 的值设置为 eval-source-map
	devtool: 'eval-source-map'
}

 

webpack生产环境下的Source Map

在生产环境下,如果省略了 devtool 选项,则最终生成的文件中不包含 Source Map,能够防止源代码通过 Source Map 的形式暴露给别人

 

只定位行数不暴露源码

在生产环境下,如果只想定位报错的具体行数,且不想暴露源码,此时可以将 devtool 的值设置为 nosources-source-map

module.exports = {
	//在开发调试阶段 建议把 devtool 的值设置为 eval-source-map
	//将值设置为 nosources-source-map 只定位行数不暴露源码 建议实际开发使用 或直接关闭 Source Map
	devtool: 'nosources-source-map'
}

 

定位行数且暴露源码

在生产环境下,如果想定位报错行数的同时,展示具体报错的源码,可以将 devtool 的值设置为 source-map

module.exports = {
	//在开发调试阶段 建议把 devtool 的值设置为 eval-source-map
	//将值设置为 nosources-source-map 只定位行数不暴露源码 建议实际开发使用 或直接关闭 Source Map
	devtool: 'source-map'
}

设置为此参数,会在打包时的 'dist' 目录下生成一个 'bundle.js.map' 文件,储存代码位置

并且在代码报错的时候会直接显示源代码的错误位置,非常危险,代码容易泄露

 

Source Map的最佳实践

1. 开发环境下

   1. 建议把 devtool 的值设置为 eval-source-map

   2. 好处: 可以精准定位到具体的错误行

2. 生产环境下

   1. 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map

   2. 好处: 防止源码泄露,提高网站安全性