sourceMap

146 阅读1分钟

webpack有一个devtool用来控制是否生成source map,以及source map是什么格式的,生成source map有利于我们调式代码,所以建议在开发环境打开source map,在生产环境关闭source map。

生产环境生产source map容易被扒到源码,关闭之后不那么容易得到源码。

关闭source map,直接不配置devtool,或者devtool:false即可。

生成source map的常用配置有这几关键字:

  • source map:使用该值之后,打包后的每一个js文件都有一个对应的map文件,并且js文件的最后一行有类似:

    //# sourceMappingURL=index_df3f886f.js.map
    

这么一行来标注该文件对应的map文件,所以在生产环境可以利用这个访问到map文件,进而得到源码。

  • eval:使用该值后,代码会被eval这个函数包裹起来。
  • inline:使用该值后,map会被以base64的格式放在打包后的js文件的末尾,像这样:

  • module:包含loader信息的source map。
  • cheap:不包含列的source map,正常情况下,source map会包含行和列,能够精确定位到代码,使用该值后,将只定位到行。

webpack的source map配置都是由这几种关键字组合而成,功能也是组合而成。