webpack进阶用法实践2

68 阅读3分钟
  1. sourcemap

通过sourcemap定位到源码,开发环境开启,线上关闭;sourcemap可以传到监控系统中,用于定位问题;

  1. 实践

devtool | webpack 中文网

生产环境

  • (none) 打包后的代码 适用于**生产环境** ,性能的最佳选择. 源代码啥也看不到,没有map文件;

  • source-map 适用于**生产环境** ,高质量的SourceMaps.

source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。

Warning

你应该将你的服务器配置为,不允许普通用户访问 source map 文件!

  • nosources-source-map

nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

Warning

这仍然会暴露反编译后的文件名和结构,但它不会暴露原始代码。

  • hidden-source-map

hidden-source-map - 与 source-map 相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

Warning

你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。

开发环境

  • eval 鸡肋 带 eval 生成后的代码 适合开发环境,不太适合放到生产环境,这个还好, 主要是生成的js文件包含sourcemap和业务代码,js文件明显变大了,不太适合放到生产环境;

eval - 每个模块都使用 eval() 执行,并且都有 //# sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 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-module-source-map - 类似 eval-cheap-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。

  • eval-source-map 最佳的**开发环境**

eval-source-map - 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

特定场景

以下选项对于开发环境和生产环境并不理想。他们是一些特定场景下需要的,例如,针对一些第三方工具。

用到了,自行验证;

  • inline-source-map - source map 转换为 DataUrl 后添加到 bundle 中;
  • cheap-eval-source-map V5不支持;
  • cheap-module-eval-source-map V5不支持;
  • cheap-source-map 没有列映射(column mapping)的 source map,忽略 loader source map。[文件大小合适,源码也看不到];
  • cheap-module-source-map 没有列映射(column mapping)的 source map,将 loader source map 简化为每行一个映射(mapping)。[module会暴露源码];
  • inline-cheap-source-map 类似 cheap-source-map,但是 source map 转换为 DataUrl 后添加到 bundle 中。[文件大小合适,源码也看不到];
  • inline-cheap-module-source-map 类似 cheap-module-source-map,但是 source mapp 转换为 DataUrl 添加到 bundle 中。[module会暴露源码];

官方文档提到的sourcemap选项,有的在本文中未提及,用到了再说,一般用不到!!!