webpack-sourcemap选项应该选哪个

发表于 | 更新于: | 分类于 |
字数统计: 589 | 阅读时长 ≈ 2

webpack-sourcemap选项应该选哪个

使用 webpack 也有一段时间了，但是每次看到别的项目配置，还是会去浏览一遍。这次刚好看到一个 devtool: '#eval-source-map'，就有些好奇，之前都是默认使用 #source-map 并没有过多去注意它。google一下，发现这个 devtool 选项还不少，那我们到底选哪个呢，它们有哪些区别。

先来看看官方文档的相关描述：

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 信息的 DataUrl
  • cheap-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

0%