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的最佳实践
-
开发环境下
-
建议把 devtool 的值设置为 eval-source-map
-
好处: 可以精准定位到具体的错误行
-
-
生产环境下
-
建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
-
好处: 防止源码泄露,提高网站安全性
-