webpack补充2:webpack的source map

webpack有一个devtool的配置，我们可以在其中选择一种 source map 格式来增强调试过程。这个source map的作用就是即使在合并和缩小客户端代码后仍能保持其可读性，更重要的是可调试，而不会影响性能。也就是说，当项目运行后，如果出现错误，错误信息只能定位到打包后文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。

官网说到了一个注意事项：

验证 devtool 名称时， 我们期望使用某种模式， 注意不要混淆 devtool 字符串的顺序， 模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map.

webpack5所罗列的sourse-map 有二十多种类型，全部我就不一一列举了，仔细看名字，都是由五个关键字eval，source-map，cheap，module，inline的任意组合的，具体解释如下：

eval：此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。它会在在模块末尾添加模块来源//# souceURL， 依靠souceURL找到原始代码的位置。

source-map关键字的配置项都会产生一个.map文件，该文件保存有原始代码与运行代码的映射关系， 浏览器可以通过它找到原始代码的位置。

cheap关键字，产生的.map文件不包含列信息。也就是说当你在浏览器中点击该代码的位置时， 光标只定位到行数，不定位到具体字符位置。而不包含cheap关键字时， 点击控制台log将会定位到字符位置。

module关键字， 当加上module关键字webpack将会添加loader的sourcemap。

inline关键字的配置项也会产生.map文件，但是这个map文件是经过base64编码作为DataURI嵌入，从而替换eval模式中末尾的//# souceURL。

常用配置如下：

eval： 生成代码 每个模块都被eval执行，并且存在@sourceURL

cheap-eval-source-map： 转换代码（行内） 每个模块被eval执行，并且sourcemap作为eval的一个dataurl

cheap-module-eval-source-map： 原始代码（只有行内） 同样道理，但是更高的质量和更低的性能

eval-source-map： 原始代码 但是最高的质量和最低的性能

cheap-source-map： 转换代码（行内） 生成的sourcemap没有列映射，从loaders生成的sourcemap没有被使用

cheap-module-source-map： 原始代码（只有行内） 与上面一样除了每行特点的从loader中进行映射

source-map： 原始代码 最好的sourcemap质量有完整的结果，但是会很慢

更详细的地方可参考：Source Maps