浅谈webpack devtool里的七种SourceMap模式

我们先来看看文档对这七种模式的解释：

模式解释评价评价每个组件会封装到评价评价里包裹起来执行，并且会在末尾追加注释//@ sourceURL .源地图生成一个SourceMap文件。隐藏源图和源地图一样，但不会在捆末尾追加注释。内联源映射生成一个数据全球资源定位器(Uniform Resource Locator)形式的SourceMap文件。评估源图每个组件会通过eval()来执行，并且生成一个数据全球资源定位器(Uniform Resource Locator)形式的来源地图.廉价来源地图生成一个没有列信息（列映射)的源地图文件，不包含装货设备的sourcemap(譬如巴别塔的廉价模块源代码图生成一个没有列信息（列映射)的源地图文件，同时装货设备的sourcemap也被简化为只包含对应行的。注1:

工具不仅支持这七种，而且它们还是可以任意组合上面的评估、内嵌、隐藏关键字，就如文档所说，你可以设置souremap选项为廉价模块内嵌源代码图。

注2:

如果你的模块里面已经包含了源地图，你需要用源地图加载器来和合并生成一个新的源地图。

使用结果有何不同

下面我们将列出这七种模式打包编译后的结果，从中看看他们的异同：

评价评价

webpackkjsonp([1]，[函数（模块，导出，__webpack_require__){ eval(.//# SourceURl=web pack 3360//./src/js/index.js？)},函数（模块，导出，__webpack_require__){ eval(.//# SourceURl=web pack 3360//./src/static/css/app.less？/~/.npminstall/CSS-loader/0。23 .1/CSS-loader！/~/.npminstall/post CSS-loader/1。1 .1/后置CSS-loader！/~/.npminstall/less-loader/2。2 .3/更少-装载机')}，函数（模块，导出，__webpack_require__){ eval(.//# SourceURl=web pack 3360//./src/tmpl/appTemplate.tpl？) },])评估模式会把每个组件封装到评价评价里包裹起来执行，并且会在末尾追加注释。

每个模块都用valand//@ sourceURL执行。

源地图

webpackJsonp([1]，[函数(e，t，I)}.},函数(e，t，I){ 0.},函数(e，t，I){ 0.},函数(e，t，I){ 0.},])//# SourceMappingURl=索引。js。地图与此同时，你会发现你的输出目录下多了一个index.js.map文件。

我们可以把这个index.js.map格式化一下，方便我们在下文的观察比较：

{ 'version':3，' sources ' :[' web pack 3360///js/index。js '、webpack 3360////./src/js/index.js '，/webpack 3360//./~/.npminstall/CSS-loader/0。23 .1/CSS-loader/lib/CSS-base。js '，]，' name ' :[' webpackonp '，' module '，' exports '.],'映射：号，中国民航，IAER，北京航空航天中心.'，' file':'js/index.js '，' sourcesContent':[.]，' sourceRoot':''}关于sourceMap行列信息如何映射源代码的详解，此处不是我们要重点讨论的话题，从略。

隐藏源图

webpackJsonp([1]，[函数(e，t，I)}.},函数(e，t，I){ 0.},函数(e，t，I){ 0.},函数(e，t，I){ 0.},])与源地图相比少了末尾注释，

但输出目录下的index.js.map没有少

内联源映射

webpackJsonp([1]，[函数(e，t，I)}.},函数(e，t，I){ 0.},函数(e，t，I){ 0.},函数(e，t，I){ 0.},])//# SourceMappingURl=data :应用程序/JSON；charset=utf-8；base64，eyJ2ZXJzaW9.可以看到末尾的注释sourceMap作为数据统一资源定位器的形式被内嵌进了捆中，由于sourceMap的所有信息都被加到了捆中，整个捆文件变得硕大无比。

评估源图

webpackkjsonp([1]，[函数(模块，导出，__webpack_require__){ eval(.//# SourceMappingURl=data : application/JSON；charset=utf-8；base64，)}，函数(模块，导出，__webpack_require__){ eval(.//# SourceMappingURl=data : application/JSON；charset=utf-8；base64，)}，函数(模块，导出，__webpack_require__){ eval(.//# SourceMappingURl=data : application/JSON；charset=utf-8；base64，) },]);它类似于eval，但是注释中的所有sourceMap都被转换为DataURL。

廉价来源地图

结果类似于源图生成的结果。输出目录中index.js的内容是相同的。

然而，廉价源映射生成的index.js.map比源映射生成的index.js.map代码少得多。通过对比上面source-map生成的index.js.map的结果，我们发现source属性中的列信息较少，只剩下一个‘WebPack ://js/index . js’。

//index.js.map{ 'version':3，' file':'js/index.js '，' sources ' :[' webpack :///js/index . js ']，' sourcesContent':[.]、“映射”:“AAAA”、“源根”:“}廉价模块-源-映射

//index.js.map{ 'version':3，' file':'js/index.js '，' sources ' :[' webpack :///js/index . js ']，' mappings':'AAAA '，' SourceRoot':''}在廉价模块-源-图下，sourceMap的内容较少，sourceMap的列信息减少，所以可以看出没有sourcesContent

这么多模式哪个好？

推荐的开发环境：

廉价模块评估源图

推荐的生产环境：

廉价模块源图

当下一个版本的webpack使用-d命令启动调试模式时，这也是默认选项

原因如下：

使用廉价模式可以大大提高souremap生成的效率。在大多数情况下，我们在调试时并不关心列信息，即使sourcemap没有列，一些浏览器引擎(比如v8)也会给出列信息。Eval可以大大提高连续构建的效率。官方文件提供的速度对照表显示，eval模式的编译速度非常快。使用模块支持babel，一个预编译工具(在webpack中用作加载器)。评估源映射模式可以减少网络请求。在这种模式下，DataUrl本身包含完整的sourcemap信息，浏览器不需要发送完整的请求来获取sourcemap文件，这样会稍微提高效率。生产环境中不应使用Eval，这会使文件变得非常大。源地图模式效率对比图

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。