source map 源码地图
- 前端发展到现阶段，很多时候都不会直接运行源代码，可能需要对源代码进行合并、压缩、转换等操作，真正运行的是转换后的代码，这就给调试带来了困难，因为当运行发生错误的时候，希望能看到源代码中的错误，而不是转换后代码的错误；
![]( "转换后的代码")
- 为了解决这一问题，chrome 浏览器率先支持了 source map ，其他浏览器纷纷效仿，目前，几乎所有新版浏览器都支持了 source map，
source map 实际上是一个配置，配置中不仅记录了所有源码内容，还记录了和转换后的代码的对应关系，下面是浏览器处理 source map 的原理
![]( "记录了所有源码内容")
Source Map 的配置
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
devtool: 'eval', // 配置 source map
module: {
// ......
},
plugins: [
// ......
]
}
webpack devtool 配置对比
看似配置项很多，其实只有以下五个关键字的任意组合：
| 关键字 | 描述 |
|---|---|
| eval | 使用 eval 包裹模块代码 |
| source-map | 产生 .map 文件 |
| cheap | 不包含列信息，也不包含 loader 的 source-map |
| module | 包含 loader 的 source-map （比如 jsx to js、babel 的 source-map） 否则无法定位源文件 |
| inline | 将 .map 作为 DataURL 嵌入，不单独生成 .map 文件 |
eval
每个模块被转化为字符串，在尾部添加 //# souceURL （指明 eval 前文件） 后，被 eval 包裹起来；
source-map
最原始的 source-map 实现方式，打包代码的同时生成一个 source map 文件，并在打包文件的末尾添加 //# souceURL，注释会告诉 JS 引擎原始文件位置，暴露源码；
hidden-source-map
打包结果与 source-map 一致，但是 map 文件结尾不显示 //# sourceMappingURL；
inline-source-map
为打包前的每个文件添加 source map 的 dataUrl ，追加到打包后文件内容的结尾；此处，dataUrl 包含一个文件完整 soure map 信息的 Base64 格式化后的字符串；
eval-source-map
将每个模块转化为字符串，使用 eval 包裹，并将打包前每个模块的 source map 信息转换为 Base64 编码，拼接在每个打包后文件的结尾，可以缓存 source-map 文件；
cheap-source-map
同 source-map 但不包含列信息，不包含 loader 的 sourcemap（譬如 babel 的 sourcemap）；
cheap-module-source-map
不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的，最终的 source map 只有一份，它是 webpack 对 loader 生成的 source map 进行简化，然后再次生成的；
最佳实践
在开发环境中使用 cheap-module-eval-source-map 虽然不提供列信息，只提供行信息，但是一般都能很快找到问题，代码经过 loader 转换后的差异较大，首次打包速度较慢，重写打包相对较快；
在生产环境中使用 none 或者 nosources-source-map 或者 cheap-module-source-map；
Mutation：提交状态
上一篇
