Devtool
Devtool
此选项控制是否生成,以及如何生成 source map。
使用 SourceMapDevToolPlugin
进行更细粒度的配置。查看 source-map-loader
来处理已有的 source map。
选择一种 source map
格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
Devtool模式
Devtool | 表现 | 生产 | 质量 | 评论 |
---|---|---|---|---|
none |
构建:最快 重建:最快 | 是的 | 打包后的代码 |
具有最高性能的生产版本的推荐选择。 |
eval |
构建:快速 重建:最快 | 不 | 生成后的代码 |
具有最高性能的开发版本的推荐选择。 |
eval-cheap-source-map |
构建:好的 重建:快速 | 不 | 转换过的代码 |
开发构建的权衡选择。 |
eval-cheap-module-source-map |
构建:缓慢 重建:快速 | 不 | 只映射行信息的源码 |
开发构建的权衡选择。 |
eval-source-map |
构建:最慢的 重建:好的 | 不 | 源码 |
使用高质量 SourceMaps 进行开发构建的推荐选择。 |
source-map |
构建:最慢 重建: 最慢 | 是的 | 源码 |
使用高质量 SourceMaps 进行生产构建的推荐选择。 |
inline-source-map |
构建:最慢 重建:最慢 | 不 | 源码 |
发布单个文件时的可能选择 |
hidden-source-map |
构建:最慢 重建:最慢 | 是的 | 源码 |
仅将 SourceMap 用于错误报告目的时的可能选择。 |
其中一些值适用于开发环境,一些适用于生产环境。
对于开发环境,通常希望更快速的 source map,需要添加到 bundle 中以增加体积为代价,
但是对于生产环境,则希望更精准的 source map,需要从 bundle 中分离并独立存在。
品质说明(quality)
打包后的代码
- 将所有生成的代码视为一大块代码。你看不到相互分离的模块。
生成后的代码
- 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 生成的代码。
转换过的代码
- 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。
源代码
- 每个模块相互分离,并用模块名称进行注释。你会看到转译之前的代码,正如编写它时。这取决于 loader 支持。
(仅限行)
- source map 被简化为每行一个映射。这通常意味着每个语句只有一个映射(假设你使用这种方式)。这会妨碍你在语句级别上调试执行,也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后,映射关系是不可能实现的,因为压缩工具通常只会输出一行。
对于开发环境
以下选项非常适合开发环境:
-
eval-source-map
- 每个模块使用eval()
执行,并且 source map 转换为 DataUrl 后添加到eval()
中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。 -
eval-cheap-source-map
- 类似eval-source-map
,每个模块使用eval()
执行。这是 “cheap(低开销)” 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像eval
devtool。 -
eval-cheap-module-source-map
- 类似eval-cheap-source-map
,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。
对于生产环境
这些选项通常用于生产环境中:
-
(none)
(省略devtool
选项) - 不生成 source map。这是一个不错的选择。 -
source-map
- 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。
警告
你应该将你的服务器配置为,不允许普通用户访问 source map 文件!
hidden-source-map
- 与source-map
相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。
警告
你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。