浅谈webpack devtool里的7种SourceMap模式

我们先来看看文档对这 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?'  ) }, 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 模式会把每个 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:///./src/js/index.js",    "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":""}