webpack打包生成的map文件_webpack-sourcemap映射关系

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:

不仅希望存储我们代码的映射关系, 还希望存储第三方模块映射关系, 以便于第三方模块出错时也能更好的排错