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