Webpack DevTool 7种 SourceMap 模式详解与选型指南

作者：望舒时间：2026-10-23 05:21:00浏览：569

本文深入解析 Webpack 中 7 种 SourceMap 配置模式（eval、source-map、hidden-source-map 等）的工作机制与输出差异。通过对比打包结果文件大小、构建速度及调试体验，重点阐述为何开发环境推荐 cheap-module-eval-source-map，而生产环境建议使用 hidden-source-map 或关闭 SourceMap，以平衡开发效率与安全性。

Webpack SourceMap 模式概览

首先，我们参考官方文档对以下七种 SourceMap 模式的定义说明。

模式	解释
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 不仅支持上述七种基础模式，还允许通过组合 eval、inline、hidden 等前缀关键字来生成更多变体。例如，如文档所述，你可以将 souremap 选项配置为 cheap-module-inline-source-map。

注2：

如果你的模块（modules）中已经包含了 SourceMaps，则需要使用 source-map-loader 来将其与新生成的 SourceMap 进行合并。

不同模式的使用结果差异

接下来，我们将列出这七种模式在打包编译后的具体输出结果，以便直观对比它们的异同点。

七种模式打包结果对比

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":""
}

关于 SourceMap 行列信息如何映射源代码的详细原理，此处不是本文讨论重点，故从略。

hidden-source-map 模式


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

与 source-map 相比，该模式在打包后的代码末尾不再追加注释。

但 output 目录下的 index.js.map 文件依然会被生成，并未减少。

inline-source-map 模式


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 模式


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 类似，但会将注释中的 SourceMap 转换为 DataURL 格式。

cheap-source-map 模式

其生成的 index.js 内容与 source-map 模式基本一致，output 目录下的 index.js 内容相同。

然而，cheap-source-map 生成的 index.js.map 文件内容比 source-map 模式少很多。对比上文 source-map 生成的 index.js.map 结果，可以发现 source 属性中缺少了列信息，仅保留了"webpack:///js/index.js"。


// index.js.map
{ 
"version":3, "file":"js/index.js", 
"sources":["webpack:///js/index.js"], 
"sourcesContent":[...], 
"mappings":"AAAA", 
"sourceRoot":""
}

cheap-module-source-map 模式


// index.js.map
{ 
"version":3, "file":"js/index.js", 
"sources":["webpack:///js/index.js"], 
"mappings":"AAAA", "sourceRoot":""
}

在 cheap-module-source-map 模式下，SourceMap 的内容进一步减少。除了 SourceMap 的列信息被省略外，可以看到 sourcesContent 字段也不复存在。

开发与环境选型建议

这么多模式，应该选择哪一个？

开发环境推荐：

cheap-module-eval-source-map

生产环境推荐：

cheap-module-source-map

这也是未来版本 Webpack 在使用 -d 命令启动 debug 模式时的默认选项。

原因如下：

使用 cheap 模式可以大幅提高 SourceMap 生成的效率。在大多数情况下，调试时并不关心列信息；而且即使 SourceMap 没有列信息，部分浏览器引擎（例如 V8）也会自行提供列信息。
使用 eval 方式可大幅提高持续构建的效率。官方文档提供的速度对比表格显示，eval 模式的编译速度非常快。
使用 module 可支持 Babel 等预编译工具（在 Webpack 中作为 loader 使用）。
使用 eval-source-map 模式可以减少网络请求。该模式开启 DataUrl，其本身已包含完整的 SourceMap 信息，无需像 sourceURL 那样让浏览器发送完整请求去获取 SourceMap 文件，这略微提高了效率。而在生产环境中则不宜使用 eval，因为这会导致文件体积变得极大。

SourceMap 模式效率对比图

Webpack SourceMap 模式概览