1.什么是sourcemap?
webpack打包后的文件会自动添加很多代码, 在开发过程中非常不利于我们去调试
因为如果运行webpack打包后的代码,错误提示的内容也是打包后文件的内容
所以为了降低调试的难度, 提高错误代码的阅读性, 我们就需要知道打包后代码和打包之前代码的映射关系
只要有了这个映射关系我们就能很好的显示错误提示的内容, 存储这个映射关系的文件我们就称之为sourcemap
2.如何开启sourcemap
https://www.webpackjs.com/configuration/devtool/
2.1在webpack.config.js中添加
devtool: “xxx”,
2.2各配置项说明:
2.2.1 eval:
不会单独生成sourcemap文件, 会将映射关系存储到打包的文件中, 并且通过eval存储
-
优势: 性能最好
-
缺点: 业务逻辑比较复杂时候提示信息可能不全面不正确
2.2.2 source-map:
会单独生成sourcemap文件, 通过单独文件来存储映射关系
-
优势: 提示信息全面,可以直接定位到错误代码的行和列
-
缺点: 打包速度慢
2.2.3 inline:
不会单独生成sourcemap文件, 会将映射关系存储到打包的文件中, 并且通过base64字符串形式存储
2.2.4 cheap:
生成的映射信息只能定位到错误行不能定位到错误列
2.2.5 module:
不仅希望存储我们代码的映射关系, 还希望存储第三方模块映射关系, 以便于第三方模块出错时也能更好的排错