代码在浏览器运行时,通常是通过压缩和丑化,导致对应的代码行号或者列号等跟之前有差异。假如代码打包之后在运行时报错了,调试会很不方便。
那么如何调整这种转换后不一致的代码呢,答案就是source-map
source-map
从已转换的代码,映射到原始的源文件
如何使用source-map
1.根据源文件生成source-map文件,webpack在打包的时候,配置source-map
2.再转换后的代码最后添加一个注释,让他指向sourcemap
//# sourceMappingURL=common.bundle.js.map
浏览器根据注释,找到相应的sourcemap,根据sourcemap还原代码。
目前一个sourcemap文件最终大小大概为原始文件的2.5倍左右。