Webpack的devtool的source maps

最新推荐文章于 2025-07-09 19:17:56 发布

原创最新推荐文章于 2025-07-09 19:17:56 发布 · 755 阅读

0 ·

CC 4.0 BY-SA版权

Webpack 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Webpack的devtool选项中的source map配置，探讨了不同配置如何影响构建速度和生产包大小，包括eval、source-map、cheap、module、inline等关键字的组合使用，并针对开发和生产环境给出了推荐配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）前言
我们在处理webpack打包优化时候，除开使用happypack和webpack-parallel-uglify-plugin加速babel编译构建，使用dll动态链接库，指纹缓存，页面切片，gzip压缩等优化，其实还可以设置devtool中的source maps进一步处理构建速度和生产包压缩大小。

（二）devtool
devtool官方解释

在这里插入图片描述

源映射由一大堆信息组成，可用于将压缩文件中的代码映射回原始源。您可以为每个压缩文件指定不同的源映射。

通过在优化文件的底部添加特殊注释，向浏览器指示源地图可用。

//# sourceMappingURL=/path/to/script.js.map

此注释通常由用于生成源映射的程序添加。如果启用了对源映射的支持并且开发人员工具已打开，则开发人员工具将仅加载此文件。

您还可以通过X-SourceMap在压缩的JavaScript文件的响应中发送HTTP标头来指定源映射。

源映射文件包含一个JSON对象，其中包含有关映射本身和原始JavaScript文件的信息。这是一个简单的例子：

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}

让我们仔细看看每个属性。

version- 此属性指示文件所遵循的源映射规范的版本。
file - 源映射文件的名称。
sources - 原始源文件的URL数组。
sourceRoot- （可选）sources将从中解析阵列中所有文件的URL 。
names - 包含源文件中所有变量和函数名称的数组。
mappings- 包含实际代码映射的Base64 VLQ字符串。（这是魔术发生的地方。）

（三）devtool

根据官方提供的设置项目
在这里插入图片描述
看似配置项很多，其实只是五个关键字eval，source-map，cheap，module，inline的任意组合。这五个关键字每一项都代表一个特性，这四种特性可以任意组合。它们分别代表以下五种特性（单独看特性说明有点不明所以，别急，往下看）：

eval： 使用eval包裹模块代码

source-map： 产生.map文件

cheap： 不包含列信息（关于列信息的解释下面会有详细介绍)也不包含loader的sourcemap

module： 包含loader的sourcemap（比如jsx to js ，babel的sourcemap）

inline： 将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见）

eval和source-map都是webpack中devtool的配置选项， eval模式是使用eval将webpack中每个模块包裹，然后在模块末尾添加模块来源//# souceURL，依靠souceURL找到原始代码的位置。包含eval关键字的配置项并不单独产生.map文件（eval模式有点特殊，它和其他模式不一样的地方是它依靠sourceURL来定位原始代码，而其他所有选项都使用.map文件的方式来定位）。包含source-map关键字的配置项都会产生一个.map文件，该文件保存有原始代码与运行代码的映射关系，浏览器可以通过它找到原始代码的位置。（注：包含inline关键字的配置项也会产生.map文件，但是这个map文件是经过base64编码作为DataURI嵌入），举个栗子：eval-source-map是eval和source-map的组合，可知使用eavl语句包括模块，也产生了.map文件。webpack将.map文件作为DataURI替换eval模式中末尾的//# souceURL。按照我自己的理解， eval和.map文件都是sourcemap实现的不同方式，虽然大部分sourcemap的实现是通过产生.map文件，但并不表示只能通过.map文件实现

其中一些值适用于开发环境（从表格中各种方式的构建速度来看，可以看出eval方式可大幅提高持续构建效率，这对开发环境需要边改边调而言非常重要），一些适用于生产环境。对于开发环境，通常希望更快速的 Source Map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 Source Map，需要从 bundle 中分离并独立存在。

对于开发环境

（1）开发环境：

eval- 每个模块都用eval()和执行//@ sourceURL。这很快。主要的缺点是它没有正确显示行号，因为它被映射到转换代码而不是原始代码（来自加载器的无源映射）。

eval-source-map- 执行每个模块，eval()并将SourceMap作为DataUrl添加到eval()。最初它很慢，但它提供快速重建速度并产生真实文件。行号被正确映射，因为它被映射到原始代码。它产生了最优质的SourceMaps用于开发。

cheap-eval-source-map- 类似于eval-source-map，每个模块都执行eval()。它“便宜”，因为它没有列映射，它只映射行号。它忽略了Loaders中的SourceMaps，只显示类似于devtool的转换代码eval。

cheap-module-eval-source-map- 与cheap-eval-source-map此类似，在这种情况下，处理来自加载程序的源映射以获得更好的结果。但是，Loader源映射被简化为每行一个映射。

（2）生产环境：

(none)（省略devtool选项） - 不发出SourceMap。这是一个很好的选择。

source-map - 完整的SourceMap作为单独的文件发出。它为捆绑包添加了引用注释，因此开发工具知道在哪里可以找到它。

您应该将服务器配置为禁止访问普通用户的源映射文件！

hidden-source-map- 与source-map捆绑包相同，但不添加引用注释。如果您只希望SourceMaps映射错误报告中的错误堆栈跟踪，但不希望为浏览器开发工具公开SourceMap，则非常有用。

您不应将源映射文件部署到Web服务器。而只是将它用于错误报告工具。