webpack(二)之source-map(一)

代码在浏览器运行时,通常是通过压缩和丑化,导致对应的代码行号或者列号等跟之前有差异。假如代码打包之后在运行时报错了,调试会很不方便。

那么如何调整这种转换后不一致的代码呢,答案就是source-map

source-map

从已转换的代码,映射到原始的源文件

如何使用source-map

1.根据源文件生成source-map文件,webpack在打包的时候,配置source-map

2.再转换后的代码最后添加一个注释,让他指向sourcemap

//# sourceMappingURL=common.bundle.js.map

浏览器根据注释,找到相应的sourcemap,根据sourcemap还原代码。

目前一个sourcemap文件最终大小大概为原始文件的2.5倍左右。

上一篇:webpack三探-entry、ouput、sourceMap、自动打包


下一篇:SQL 删除数据 的所有用法