webpack的sourcemap各种参数详解
2022-06-02 本文已影响0人
刷题刷到手抽筋
webpack配置中的devtool字段可以允许我们控制sourcemap的生成，提供开发时候的代码定位功能
关于sourcemap可以参考 sourcemap详解
1. sourcemap关键字
sourcemap关键字如下
- eval
使用eval包裹代码模块（这个代码块是转译后的代码，并未进行打包和压缩）
eval包裹每个代码块时候，会在后面增加"sourceURL"（和sourcemap里的"sourceMappingURL"不同）用来定位到原文件。
eval模式优势在于，它是将每个模块单独eval执行，因此如果配合source-map使用，就可以单独缓存每个模块的sourcemap，这样就可以在重新构建时候实现增量修改sourcemap，节省时间。如果不使用eval模式，就是一个文件（chunk）对应一个sourcemap，重新构建时候需要将整个chunk的sourcemap重新生成，更耗费时间。
因此eval模式的优势就在于重新构建的速度更快 - source-map
产生source map - cheap
用来修饰source-map
让sourcemap只保存行信息，不保存列信息
让sourcemap只将打包后的代码映射到转换过的代码，不映射到原始源代码
【由于源代码到转译后的代码的映射关系由相应的loader提供，因此cheap模式应该不需要关心这部分的sourcemap】 - module
用来修饰cheap-source-map
让sourcemap可以映射到原始源代码
【由于源代码到转译后的代码的映射关系由相应的loader提供，因此module模式应该会处理这部分sourcemap，以最终得到到原始源代码的映射】 - inline
用来修饰source-map
将.map作为DataURI嵌入，不单独生成.map文件
2. 常见sourcemap组合
| devtool | 构建速度 | 重新构建速度 | 生产环境 | 品质 |
|---|---|---|---|---|
| (none) | +++ | +++ | yes | 打包后的代码 |
| eval | +++ | +++ | no | 生成后的代码 |
| cheap-eval-source-map | + | ++ | no | 转换过的代码（仅限行） |
| cheap-module-eval-source-map | o | ++ | no | 原始源代码（仅限行） |
| eval-source-map | -- | + | no | 原始源代码 |
| cheap-source-map | + | o | no | 转换过的代码（仅限行） |
| cheap-module-source-map | o | - | no | 原始源代码（仅限行） |
| inline-cheap-source-map | + | o | no | 转换过的代码（仅限行） |
| inline-cheap-module-source-map | o | - | no | 原始源代码（仅限行） |
| source-map | -- | -- | yes | 原始源代码 |
| inline-source-map | -- | -- | no | 原始源代码 |
| hidden-source-map | -- | -- | yes | 原始源代码 |
| nosources-source-map | -- | -- | yes | 无源代码内容 |
\
品质说明
\
- 原始源代码
你写的代码，未经过任何处理 - 转换过的代码
经过各种loader转译后的代码 - 生成后的代码
转译后并经过webpack处理，注入webpack运行时代码后的代码 - 打包后的代码
合成一个chunk后的、压缩过的代码
3. 最佳实践
- 本地开发环境使用"eval-cheap-module-source-map"
这个配置提供到源代码的的完整映射，方便定位问题，并且不需要通常不必要的行映射，提高了构建速度，并且由于使用了eval，重构建速度更高 - 测试环境使用"eval-cheap-module-source-map"
原因和本地开发环境一样，如果介意内联sourcemap导致文件过大，可以配置"cheap-module-source-map" - 线上尽量不使用sourcemap，防止业务逻辑暴露。
线上debug
- 将sourcemap上传到线上错误监控系统中，这样代码报错就可以定位到源码的相应位置
- 将sourcemap上传到公司内网
