source-map整理

eval

每一个 module 会经过 eval() 来执行，并在后面添加 //# sourceURL

形式：

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?"
    )
  },
...])

特色：

eval有最好的性能，可是它只映射到每一个模块源码文件，没有行列信息。

source-map

打包代码同时建立一个新的 sourcemap 文件， 并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])
//# sourceMappingURL=index.js.map

特色：

source-map 不能为模块和须要从新生成的代码块缓存SourceMaps，它适用于生产环境。

inline-source-map

为每个文件添加 sourcemap 的 DataUrl，注意这里的文件是打包前的每个文件而不是最后打包出来的，同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一个 url

形式：

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

这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl

形式：

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和source-map的特色，eval将每一个模块包起来，而且最后添加source-map的base64信息，能够知道行列，能够为模块缓存它能够更快的重建SourceMaps。

cheap-source-map

不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

特色：

不包含行信息，会减少map大小，不支持loader的sourcemap，好比从jsx映射到js，最终你只能访问到js文件，看不了源码的jsx文件。

cheap-module-source-map

不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份，它是 webpack 对 loader 生成的 sourcemap 进行简化，而后再次生成的。

特色：

相较于cheap-source-map，能够支持loader的sourcemap

hidden-source-map

和 source-map 同样，但不会在 bundle 末尾追加注释.

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])

特色：

与 source-map 相比少了末尾的注释，但 output 目录下的 index.js.map 没有少

注1：webpack 不只支持这 7 种，并且它们仍是能够任意组合上面的 eval、inline、hidden 关键字，就如文档所说，你能够设置 souremap 选项为 cheap-module-inline-source-map。

注2：若是你的 modules 里面已经包含了 SourceMaps ，你须要用 source-map-loader来和合并生成一个新的 SourceMaps 

调试

github上关于调试的问题：Source Maps don't work on Chrome

我的实测：

chrome里可否调试源码 x：不行 o：能够

eval-source-map x(刷新断点被忽略)

cheap-source-map x(不是源码)

cheap-module-eval-source-map x(刷新断点被忽略)

cheap-module-source-map x(断点位置不对)

source-map o

inline-source-map o

总结

eval： 更快

inline：内联

cheap：不含列信息，不支持loader sourcemap（譬如 babel 的 sourcemap，从jsx到js的映射）

cheap-module：不含列信息，支持loader sourcemap

source-map：包含行列信息，支持loader sourcemap