source map 开发优化工具

什么是 Source map

简单来说 Source map 就是一个存储信息的文件，里面储存着位置信息。

Source map 英文释义：源程序映射。

位置信息：转换后的代码对应的转换前的代码位置映射关系。

有了 Source map，就算线上运行的是转换后的代码，调试工具中也可以直接显示转换前的代码。这极大的方便了我们开发者调试和排错。

Source map 文件介绍

就以上述案例生成的 main.js.map 为例，我们来了解一下，它的内容结构是怎样的。

复制代码

{
  // version：Source map 的版本，目前为 3。
  "version": 3,

  // file：转换后的文件名。
  "file": "main.js",

  // sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
  "sourceRoot": "",

  // sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
  "sources": ["webpack://app/./main.js"],

  // sourcesContent：原始代码
  "sourcesContent": ["alert('tomato')\r\n"],

  // names：转换前的所有变量名和属性名。
  "names": ["alert"],

  // mappings：记录位置信息的字符串，下文详细介绍。
  "mappings": "AAAAA,MAAM"
}

webpack 中 devtool 的多种配置

查看官方文档，可以了解到，devtools 的配置项可以达到 10-20 种左右的情况。其实并不需要记住那么多情况，本质上是一些配置项的排列组合。

配置项如下：

source-map：生成 sourcemap 文件，可以配置 inline，会以 dataURL 的方式内联，可以配置 hidden，只生成 sourcemap，不和生成的文件关联；
hidden：是否会在打包后文件的末尾增加 sourceURL；
inline：不产生独立的 .map 文件，把 source-map 的内容以 dataURI 的方式追加到目标文件末尾；
eval：浏览器 devtool 支持通过 sourceUrl 来把 eval 的内容单独生成文件，还可以进一步通过 sourceMappingUrl 来映射回源码，webpack 利用这个特性来简化了 sourcemap 的处理，可以直接从模块开始映射，不用从 bundle 级别。
cheap：只映射到源代码的某一行，不精确到列，可以提升 sourcemap 生成速度；
nosources：不生成 sourceContent 内容，可以减小 sourcemap 文件的大小；
module： sourcemap 生成时会关联每一步 loader 生成的 sourcemap，可以映射回最初的源码；

不同的配置之间可以排列组合

eval

eval：每一个模块都执行eval()过程，并且会追加//@ sourceURL

eval-source-map：每一个模块在执行eval()过程之后，并且会为每一个模块生成sourcemap文件，生成的sourcemap文件通过DataURL的方式添加

eval会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加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?"
    )
  },
...])

上述是一个指定devtool：eval的压缩后的代码，我们发现压缩后的代码的每一个模块后面都增加了一端包含sourceURL的注释，sourceURL的值是压缩前的代码，这样就通过sourceURL关联了压缩前后的代码，并没有为每一个模块生成相应的sourcemap。

因为不需要生成模块的sourcemap，因此打包的速度很快。

注意！

eval-source-map组合使用是指将.map以DataURL的形式引入到打包好的模块中，类似于inline属性的效果，我们在生产中，使用eval-source-map会使打包后的文件太大 ，因此在生产环境中不会使用eval-source-map。但是因为eval的rebuild速度快，因此我们可以在本地环境中增加eval属性。