Webpack中的sourcemap以及如何在生产和开发环境中合理的设置

一 、 从Sourcemap和Data URL说起

（1）什么是Sourcemap?

我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。

举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。

sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。这里的处理操作包括：

I）压缩，减小体积

II）将多个文件合并成同一个文件

III）其他语言编译成javascript，比如TypeScript和CoffeeScript等

（2）什么是DataURL?

DataURL最早是出现在HTML文件img标签中的关于图片的引用，DataURL提供了一种将图片”嵌入”到HTML中的方法。

转  :  https://blog.csdn.net/liwusen/article/details/79414508

http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html