webpack中Source Map的理解

引子：当我们在终端中运行npm run dev时，如果代码出现问题报错时， 我们通过控制台看到的错误是在代码压缩后的，而不是源代码的错误，具体如下图：

可以看出， 我们在源代码中故意写错console，然后运行后报错，但是这个报错行数显示的是13行，而我们源代码确是在第八行，所以就会出现错误行数不匹配的结果，所以我们引出Source Map概念。

概念：Source Map就是一个信息文件，里面存储着位置信息，也就是说Source Map文件中存储着压缩、混淆后的代码，所对应的转换前的位置，有了它，代码出错的时候，除错工具将直接显示原始代码的错误行数，而不是转换后的代码，能够极大的方便后期的调试。

使用：

只需在webpack.config,js文件中添加下面的配置即可：

module.exports = {
  mode: "development",
  devtool:'eval-source-map'
}

当我们在发布的时候，建议注释掉，这样可以防止原始代码通过sourcemap的形式暴露给别有用心的人，当然我们也可以通过下面的方法进行预防

我们只需要将devtool中的值修改为：

'nosource-source-map'

这样报错时，只会定位报错行数，不会暴露源代码