02-webpack核心基础-Webpack中sourcemap

一：什么是SourceMap?

我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题的。

二：如何开启sourcemap

中文文档

在webpack.config.js中添加

devtool: "xxx",

各配置项说明:

eval:

不会单独生成sourcemap文件, 仅仅是在每一个模块后，增加sourceURL来关联模块处理前后对应的关系。 会将映射关系存储到打包的文件中, 并且通过eval存储
优势: 性能最好
缺点: 业务逻辑比较复杂时候提示信息可能不全面不正确, 由于会映射到转换后的代码，而不是映射到原始代码，所以不能正确的显示行数。

source-map:

会单独生成sourcemap文件, 通过单独文件来存储映射关系
优势: 提示信息全面,可以直接定位到错误代码的行和列
缺点: 打包速度慢

inline:

不会单独生成sourcemap文件, 会将映射关系存储到打包的文件中, 并且通过base64字符串形式存储
缺点：它会使得bundle.js文件变得非常大，因为它需要把 sourceMappingURL 以dataurl的形式插入到bundle.js里面去。

cheap:

生成的映射信息只能定位到错误行不能定位到错误列

module:

不仅希望存储我们代码的映射关系, 还希望存储第三方模块映射关系, 以便于第三方模块出错时也能更好的排错。也是生成一个没有列的信息的sourceMaps文件，同时loader的sourcemap也被简化成为只包含对应行的。

看似配置项很多， 其实只是五个关键字eval，source-map，cheap，module，inline的任意组合。这五个关键字每一项都代表一个特性， 这五种特性可以任意组合。

三、开发环境和线上环境如何选择sourceMap?

开发环境推荐：

cheap-module-eval-source-map
只需要行错误信息, 并且包含第三方模块错误信息, 并且不会生成单独sourcemap文件

生产环境推荐：

cheap-module-source-map
只需要行错误信息, 并且包含第三方模块错误信息, 并且会生成单独sourcemap文件