使用chrome sourcemap 在线编辑代码的开发体验非常畅快， 最简单的souorcemap是在线调试原始的css代码， 只需要将项目文件夹添加到chrome中，然后就可以直接在chrome中以所见即所得的方式编辑css了。简单的soucemap调试可以看下这篇文章Chrome 浏览器的 source-map 功能

关于webpack中sourcemap的文章很多，但感觉大部分是翻译官方文档的说明， 缺乏直观的用例，写这篇博客的目的是帮自己厘清这个概念， 也顺便将我自己收集的这方面的干货放在这。本文将尝试先讲清楚webpack中的sourcemap配置项的概念。