第五十八篇：webpack的Source Map

好家伙，Source Map没听过

 

 1.什么是Source Map?

 

 

　　字面意义上来看应该是个好东西

　　Source Map 就是一个信息文件，里面储存着位置信息。

　　也就是说，Source Map 文件中存储着压缩混淆后的代码所对应的转换前的位置。

　　有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，

　　能够极大的方便后期的调试。

 

2.为什么需要Source Map?

　　Source Map好东西，一般如果在源文件中语法出现了错误，打错字母了，

　　源文件和打包后文件中代码对应的行数是不一致的，所以我们有了这个工具Source Map

 

3.关于Source Map的设置

　　解决默认 Source Map的问题
　　开发环境下，推荐在webpack.config.js
　　中添加如下的配置，

　　即可保证运行时报错的行数与源代码的行数保持一致：

module.exports={

　 　mode: 'development',

    \\eval-source-map 仅限在“开发模式”下使用，不建议在“生产模式”下使用。

    \\此选项生成的 Source Map 能够保证“运行时报错的行数＂与“源代码的行数”保持一致

　　 devtool: 'eval-source-map',

    \\省略其它配置项．．．

｝

 

 

4.Source Map的devtool属性可选项:

　　4.1.只暴行数,不暴代码的折中方案

　　devtool: 'nosources-source-map',

       4.2.省略了devtool选项,则最终生成的文件中不包含Source Map

 

5.Source Map的最佳实践

　　5.1.开发环境下：
　　建议把 devtool的值设置为 eval-source-map
　　好处：可以精准定位到具体的错误行

　　5.2.生产环境下：
　　建议关闭 Source Map 或将 devtool的值设置为 nosources-source-map
　　好处：防止源码泄露，提高网站的安全性

That's all