为何,如何
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面板。