浅谈webpackdevtool里的7种SourceMap模式-创新互联

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

创新互联拥有一支富有激情的企业网站制作团队，在互联网网站建设行业深耕十多年，专业且经验丰富。十多年网站优化营销经验，我们已为1000+中小企业提供了做网站、成都做网站解决方案，按需网站策划，设计满意，售后服务无忧。所有客户皆提供一年免费网站维护!

模式	解释
eval	每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.
source-map	生成一个SourceMap文件.
hidden-source-map	和 source-map 一样，但不会在 bundle 末尾追加注释.
inline-source-map	生成一个 DataUrl 形式的 SourceMap 文件.
eval-source-map	每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.
cheap-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

注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?'
  )
 }, 
function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceURL=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?"
  )
 },
...])

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：浅谈webpackdevtool里的7种SourceMap模式-创新互联
路径分享：http://shouzuofang.com/article/djgsco.html