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倍左右。