这篇文章主要介绍了浅谈webpack devtool里的7种SourceMap模式，主要介绍了这7种模式的使用和打包编译后的结果的不同，非常具有实用价值，有兴趣的可以了解一下
我们先来看看文档对这 7 种模式的解释：
注1：
webpack不仅支持这 7 种，而且它们还是可以任意组合上面的eval、inline、hidden关键字，就如文档所说，你可以设置 souremap 选项为 cheap-module-inline-source-map。
注2：
如果你的modules里面已经包含了SourceMaps，你需要用source-map-loader来和合并生成一个新的 SourceMaps。
使用结果有何不同
下面我们将列出这 7 种模式打包编译后的结果，从中看看他们的异同：
eval
`webpackJsonp([1],[`
`function``(module,exports,__webpack_require__){ `
`eval(`
`... `
`//# sourceURL=[webpack:///./src/js/index.js?](webpack:///./src/js/index.js?)'`
`)`
`},`
`function``(module,exports,__webpack_require__){ `
`eval(`
`... `
`//# sourceURL=[webpack:///./src/static/css/app.less?./](webpack:///./src/static/css/app.less?./)~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader'`
`)`
`},`
`function``(module,exports,__webpack_require__){ `
`eval(`
`... `
`//# sourceURL=[webpack:///./src/tmpl/appTemplate.tpl?](webpack:///./src/tmpl/appTemplate.tpl?)"`
`)`
`},`
`...])`
eval 模式会把每个 module 封装到eval 里包裹起来执行，并且会在末尾追加注释。
Each module is executed withevaland//@ sourceURL.
source-map
webpackJsonp([1],[
function(e,t,i){...},
function(e,t,i){...},
function(e,t,i){...},
function(e,t,i){...},
...
])//# sourceMappingURL=index.js.map
与此同时，你会发现你的 output 目录下多了一个index.js.map文件。
我们可以把这个 index.js.map 格式化一下，方便我们在下文的观察比较：
`{`
`"version"``:3,`
`"sources"``:[`
`"[webpack:///js/index.js](webpack:///js/index.js)"``,``"[webpack:///./src/js/index.js](webpack:///./src/js/index.js)"``, `
`"[webpack:///./](webpack:///./)~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js"``,`
`...`
`],`
`"names"``:[``"webpackJsonp"``,``"module"``,``"exports"``...],`
`"mappings"``:``"AAAAA,cAAc,IAER,SAASC..."``,`
`"file"``:``"js/index.js"``,`
`"sourcesContent"``:[...],`
`"sourceRoot"``:``""`
`}`
关于 sourceMap 行列信息如何映射源代码的详解，此处不是我们要重点讨论的话题，从略。
hidden-source-map
webpackJsonp([1],[
function(e,t,i){...},
function(e,t,i){...},
function(e,t,i){...},
function(e,t,i){...},
...
])
与 source-map 相比少了末尾注释，
但 output 目录下的 index.js.map 没有少
inline-source-map
webpackJsonp([1],[
function(e,t,i){...},
function(e,t,i){...},
function(e,t,i){...},
function(e,t,i){...},
...
])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...
可以看到末尾的注释 sourceMap 作为DataURL的形式被内嵌进了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中，整个 bundle 文件变得硕大无比。
eval-source-map
webpackJsonp([1],[
function(module,exports,__webpack_require__){
eval(
...
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...
)
}, function(module,exports,__webpack_require__){
eval(
...
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...
)
},
function(module,exports,__webpack_require__){
eval(
...
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...
)
},
...
]);
和 eval 类似，但是把注释里的sourceMap 都转为了 DataURL。
cheap-source-map
和 source-map 生成结果差不多。output 目录下的index.js内容一样。
但是 cheap-source-map 生成的 index.js.map 的内容却比 source-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](webpack:///js/index.js)"``],`
`"sourcesContent"``:[...],`
`"mappings"``:``"AAAA"``,`
`"sourceRoot"``:``""`
`}`
cheap-module-source-map
`// index.js.map`
`{`
`"version"``:3,` `"file"``:``"js/index.js"``,`
`"sources"``:[``"[webpack:///js/index.js](webpack:///js/index.js)"``],`
`"mappings"``:``"AAAA"``,` `"sourceRoot"``:``""`
`}`
在 cheap-module-source-map 下 sourceMap 的内容更少了，sourceMap的列信息减少了，可以看到sourcesContent也没有了。
这么多模式用哪个好？
开发环境推荐：
cheap-module-eval-source-map
生产环境推荐：
cheap-module-source-map
这也是下版本 webpack 使用 -d 命令启动 debug 模式时的默认选项
原因如下：
使用 cheap 模式可以大幅提高souremap 生成的效率。大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息。
使用 eval 方式可大幅提高持续构建效率。官方文档提供的速度对比表格可以看到 eval 模式的编译速度很快。
使用 module 可支持babel这种预编译工具（在 webpack 里做为 loader 使用）。
使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。
SourceMap模式效率对比图
为了学习工作与休闲娱乐互不冲突，现新建圈【码农茶水铺】用于程序员生活，爱好，交友，求职招聘，吐槽等话题交流，希望各位大神工作之余到茶水铺来喝茶聊天。群号:582735936
了解更多
网友评论