开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
前言
开发时我们运行的代码是经过 webpack 编译后的，所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错，那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。所以我们就需要想办法去用加准确的错误提示，来帮助我们更好的开发代码,所以这个时候就需要用到SourceMap
SourceMap
SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。
使用
参考文档Webpack DevTool 文档实际开发只需要关注以下两种情况就可以了。
| 属性 | 优点 | 缺点 | 模式 |
|---|---|---|---|
| devtool: "cheap-module-source-map" | 打包编译速度快，只包含行映射 | 没有列映射 | 用于生产模式 |
| devtool: "source-map" | 包含行/列映射 | 打包编译速度更慢 | 用于开发模式 |
了解了之后增加以下配置 ：
// webpack.dev.js
module.exports = {
......
mode: "development",
devtool: "cheap-module-source-map",
};
// webpack.prod.js
module.exports = {
......
mode: "development",
devtool: "source-map",
};
测试一下
首先写一个在main.js中写一个错误
不进行SourceMap配置的情况下分别打包运行代码
开发模式:在开发模式下可以看到,报错提醒是打包后的代码，当代码体量变得越来越大的时候也是没有办法很快定位到具体错误的。
生产环境：在生产环境下，由于代码被压缩，控制台显示的报错提示如下，想要找到具体错误的地方会比较困难。
配置了SourceMap的情况下分别打包运行代码
开发模式:在开发模式下可以看到,报错提醒已经可以精确到源代码的行号。
生产环境：在生产环境下，报错提醒会精确到源代码的行号和列号。
小结
通过上面的测试可以发现，当我们配置了SourceMap，无论是在开发环境还是在生产环境，只要代码出现错误，在控制台都可以准确的将错误信息给到我们，大大的提升我们开发以及解决错误问题的效率！
