本文深入解析 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 模式效率对比图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。