今天做项目遇到一点难题，我用 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:如有错误，请指正哈。
