# webpack 使用 source-map

# source map 的意义

简单说，Source map 就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。

# 使⽤ source map

开发环境开启，线上环境关闭，如果需要在线上使用时，可以在排查问题的时候将 sourcemap 上传到错误监控系统。

# source map 关键字

• eval: 使用 eval 包裹模块代码；

• source map: 产⽣ .map 文件；

• cheap: 不包含列信息；

• inline: 将 .map 作为 DataURI 嵌入，不单独生成 .map 文件；

• module:包含 loader 的 source-map；

# source map 类型

# 开启 source map

可以通过 webpack 中的 devtool 参数进行配置，不同的值会明显影响到构建( build )和重新构建( rebuild )的速度。

module.exports = {
	...
	/* 此选项控制是否生成，以及如何生成 source map */
	devtool: 'eval'
}

基本上开发环境直接用 source-map 这个类型。production 环境就把 source-map 添加到 Error Reporting Tool（e.g. Sentry）上。这样既不直接暴露源代码，也能方便解决 production 环境遇到的 bug。