webpack-sourcemap选项应该选哪个
使用 webpack 也有一段时间了,但是每次看到别的项目配置,还是会去浏览一遍。这次刚好看到一个 devtool: '#eval-source-map'
,就有些好奇,之前都是默认使用 #source-map
并没有过多去注意它。google一下,发现这个 devtool 选项还不少,那我们到底选哪个呢,它们有哪些区别。
先来看看官方文档的相关描述:
有构建速度,重新构建速度,打包速度,来源 这几项的展示。
然后可以看看这一篇文章,对这几个选项描述得比较详细:
https://chemzqm.me/webpack-sourcemap
摘出主要部分:
eval
文档上解释的很明白,每个模块都封装到eval
包裹起来,并在后面添加//# sourceURL
source-map
这是最原始的source-map
实现方式,其实现是打包代码同时创建一个新的sourcemap
文件, 并在打包文件的末尾添加//# sourceURL
注释行告诉 JS 引擎文件在哪儿hidden-source-map
文档上也说了,就是 soucremap 但没注释,没注释怎么找文件呢?貌似只能靠后缀,譬如xxx/bundle.js
文件,某些引擎会尝试去找xxx/bundle.js.map
inline-source-map
为每一个文件添加sourcemap
的 DataUrl,注意这里的文件是打包前的每一个文件而不是最后打包出来的,同时这个DataUrl
是包含一个文件完整souremap
信息的Base64
格式化后的字符串,而不是一个 url。eval-source-map
这个就是把eval
的sourceURL
换成了完整souremap
信息的 DataUrlcheap-source-map
不包含列信息,不包含loader
的sourcemap
,(譬如babel
的 sourcemap)cheap-module-source-map
不包含列信息,同时loader
的sourcemap
也被简化为只包含对应行的。最终的sourcemap
只有一份,它是webpack
对loader
生成的sourcemap
进行简化,然后再次生成的。
webpack 不仅支持这 7 种,而且它们还是可以任意组合的,就如文档所说,你可以设置 souremap 选项为 cheap-module-inline-source-map
。
结合官方的列表比较和引用的这篇文章的介绍,就比较容易选择合适的选项了。建议开发时使用 #cheap-module-eval-source-map
,测试环境或线上有需要的话使用 #cheap-module-source-map