webpack中sourceMap各个可选项分析

726 阅读2分钟

为何,如何

sourceMap 有助于开发者准确定位错误代码所在位置。

module.exports = {
  devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map'
}

1、eval:映射到转换后的代码

eval是Javascript内置函数,用于计算字符串表达式的值。

//例1
eval("2+3"); // 5
//例2
foo = 4;
console.log(eval('foo + 2')); // 6

当sourceMap为该选项时:每个 module 会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL.

优点
快速构建

缺点
“由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。”

2、eval-source-map:映射到原始代码

特点

  • 初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度。
  • 生成实际的文件。行数能够正确映射,因为会映射到原始代码中。

3、eval-cheap-source-map:类似eval-source-map,但只是映射行数,不映射列数

4、eval-cheap-module-source-map :与cheap-eval-source-map相同,但是包含了不同loader模块之间的sourceMap。

以上选项生产环境不可用

5、source-map

特点

  • map文件包含完整的原始代码,但是打包会很慢。
  • 打包后的js最后一行是map文件地址的注释

6、hidden-source-map

特点

  • 与 source-map 相同,但不会为 bundle 添加引用注释。
  • 如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

7、nosources-source-map

特点

  • 生成的map文件不包含源码,但是会正确提示错误的行数。
  • 另外项目的目录结构和文件名称会暴露在Sources面板。

参考文献:
webpack.docschina.org/configurati…

juejin.cn/post/684490…