@Dale-Lin
2022-03-21T14:50:25.000000Z
字数 1053
阅读 335
webpack5
devtool 选项控制是否生成，以及如何生成 source map。
选择合适的 souce map 来加强 debugging process。该设置会很大程度影响构建速度。
质量
bundle：souce map 以单行注释形式的 dataUrl 打包到最终输出的 js bundle 里，可以看到 webpack 最后生成的代码。
generated：和 bundle 的区别是对每个模块单独做了注释区分。
transformed：和 generated 的区别是可以看到 webpack 处理前，loader 处理后的代码。
original：每个模块单独分离注释，可以看到未经过任何处理的代码（loader 支持的话）。
original lines: 和 original 的区别是只会对行信息进行映射，列信息会被忽略。
| devtool | 质量 | production 可用 | 构建速度 | 重新构建速度 | 备注 |
|---|---|---|---|---|---|
| (none) | bundle | 1 | 5 | 5 | 不生成 source map |
eval-source-map |
original | 0 | 1 | 2 | 每个模块用 eval 来执行，每个模块用注释 //@ sourceURL 生成 dataUrl source map |
eval |
generated | 0 | 4 | 5 | 比 eval-source-map，每个模块分别生成注释 dataUrl source map，省略了列信息，且忽略了 loader 的 source map |
eval-cheap-source-map |
transformed | 0 | 3 | 4 | 比 eval-source-map 省略了列信息，忽略了 loader 的 souce map |
eval-cheap-module-source-map |
original lines | 0 | 2 | 4 | 比 eval-cheap-source-map 对 loader 的 source map 做了处理 |
source-map |
original | 1 | 1 | 1 | 生成独立文件的完整 source map，在 js bundle 中用注释 //# sourceMappingURL=xx.bundle.js.map 表示。 |
hidden-source-map |
original | 1 | 1 | 1 | 和 source-map 的区别是没加注释，所以浏览器无法使用。 |
nosources-source-map |
orginal | 1 | 1 | 1 | 和 source-map 的区别是 source map 文件中不包含源码，但错误信息堆栈是原始的。 |
source-map会向客户端暴露源码，必须严格控制用户的访问权限！
hidden-source-map生成的 source map 文件不该上传到 web 服务器，而是用于错误上报工具。