【项目EVA】如何在 Webpack 中配置 source map

今天做项目遇到一点难题，我用 Webpack 打包了文件之后，如果报错，我在浏览器中看到的是打包文件的报错地址，这样我就需要自己去找报错的具体文件，既耗时也费力。所以知道 source map 之后，了解到它可以告诉我错误代码具体在哪个文件哪行，这样调试代码就方便很多了。

没有用 source map 之前，报错显示的文件是 bundle-d75b...js:12866

使用 source map 之前

使用了source map 之后，就可以看到报错的具体位置是在 inde.js:4，那么我就可以根据这个信息去调试。

使用 source map 之后

那么怎么在项目中使用 source map 呢？

首先，打开 Chorme 浏览器，开发者工具->Settings->Sources，然后将 Enable JavaScript source maps 这一项勾上。

Enable JavaScript source maps

剩下的事情就是配置 webpack了。

执行 `npm install -D source-map-loader`,安装 source-map loader，并在 webpack.config.js 文件中使用 loader。

source-map-loader

在 module.exports 里添加代码：

`devtool: "source-map"`

这样就能愉快的 debug 了。

PS:如有错误，请指正哈。