Webapck选择Source Map

Source Map

调试和报错都是基于经过webpack打包转换之后的运行代码来进行的，要解决这个问题，利用source map来映射源代码与转换代码之间的关系，转换之后的代码，通过source map逆向解析，可以得到源代码。

开发过程中帮助定位问题，生产环境中无实际意义
例：在jquery-3.4.1.min.js中最后一行添加
//# sourceMappingURL=jquery-3.4.1.min.map 即可在运行程序调试源代码

webpack 配置使用 Source Map

	//配置开发过程中的辅助工具,source-map
    devtool:'source-map', 
   

 支持12种方式 效率和效果不同
 eval只能定位出现问题源代码文件的名称 构建速度最快

webapck选择 source map 模式

1、开发阶段选择 cheap-module-eval-source-map
代码每行不会超过80个字符 问题定位到行就可
loader转换之后的代码和转换之前差别很大，需要调试转换之前的源代码
首次打包速度慢，webpack-dev-serve以监视模式重新打包，重写打包速度快
2、发布前使用 none 会暴露源代码 不安全
可调式的话 可使用 nosource-source-map可找到源代码对应的位置 不会暴露内容