webpack sourcemap 精简说明

对于一个 webpack 构建的项目，source-map 对于开发调试，打包速度还是影响很大的，但是 webpack 的官方说明却不那么清晰易懂，也没有找到很精简的说明文章，索性自己尝试下所有的参数，概述一下自己的理解。

有兴趣的同学可以自行创建一个简单的 webpack 项目，切换参数尝试下，会更容易理解

**注意尝试的时候，要把webpack mode设置为none, webpack4 mode 为 development和production时会有额外的行为 **

首先看下官网的那张说明图：

看上去是不是很烦！！其实抽离出其中的关键字，理解每个关键字的做了什么，起到什么作用，剩下的就是彼此间的组合了。

eval => 提升 rebuild 速度

eval 的作用是使得打包后的 bundle 文件中每个模块代码使用 eval 去执行，会保留每个模块的 eval 形式的文件，即便是指定了eval-source-map,仍然会在浏览器开发者工具中生成 webpack-internals:// 文件夹来保存一份里面是eval形式的模块文件。如图：

猜测这样做的目的：因为 eval 中为字符串形式，所以当源码变动的时候进行字符串处理会提升 rebuild 的速度，所以可以看到图表中所有带有 eval 的选项，rebuild 速度都很快。

因此 eval 的关键字就是 rebuild

source-map => 额…… source-map

这个貌似不需要说明，就是指定了这个关键字才会真正的进行 source-map 生成，生成 .map 文件, 会在 bundle 文件末尾追加 sourceURI= 指定 .map 文件路径，会在浏览器开发者工具中看到webpack://的文件夹

inline => dataURI

正常的source-map 的生成是在dist 目录下创建一个 .map 文件， inline 的含义就是不产生独立的 .map 文件，而把 source-map 的内容以 dataURI的方式追加到 bundle 件末尾，入股：

至于什么是 dataURI，请自行google ~~

所以 inline 的关键字是 dataURI

cheap => lines-only

cheap 的含义是忽略列信息，可以看到图表中所有带有 cheap 的说明中都有 lines-only.

忽略列信息的意思就是出了问题只能定位到某一行，不能定位到这行的哪一列， cheap 主要是为了提升打包速度，很好理解嘛，只关注行，不关注列，生成map的速度肯定快啊~~

所以 cheap 的关键字就是lines-only

module => loader

module 的作用是 map 到 loader 处理前的文件，如果不加 module, 实际上是 map 到源文件经过对应 loader 处理后的样子。这个需要 loader 的支持

所以 module 的关键字是 loader

最下面的两个选项

hidden-source-map

就是不在 bundle 文件结尾处追加 sourceURL 指定其 sourcemap文件的位置，但是仍然会生成 sourcemap 文件。这样，浏览器开发者工具就无法应用sourcemap, 目的是避免把sourcemap文件发布到生产环境，造成源码泄露。

生产环境应该用错误报告工具结合 sourcemap 文件来查找问题

nosources-source-map

sourcemap 中不带有源码，这样，sourcemap 可以部署到生产环境而不会造成源码泄露，同时一旦出了问题，error stacks 中会显示准确的错误信息，比如发生在哪个源文件的哪一行，如图：

总结

以上所有关键字说明完毕，然后再去看官网的说明，会容易理解的多。什么时候用哪个选相也可以自行思考了。

本文仅从使用的角度来理解 sourcemap, 想要详细了解 sourcemap 原理的可自行搜索，如阮老师的 JavaScript Source Map 详解

最后附上主要关键字对应方便记忆：

• evel => rebuild
• inline => dataURI
• cheap => lines-only
• module => loader