Devtool
source map( 源码 地图)
- source map 应在开发环境中使用,作为一种调试手段
- source map 不应该在生产环境中使用,source map的文件一般较大不仅会导致额外的网络传输,还容易暴露原始代码。即便要在生产环境中使用source map,用于调试真实的代码运行问题,也要做出一些处理规避网络传输和代码暴露的问题。
www.webpackjs.com/configurati…
对于开发环境
以下选项非常适合开发环境:
eval每个模块都使用eval()执行,并且都有//# sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。eval-source-map每个模块使用eval()执行,并且 source map 转换为 DataUrl (base64的方式,将文件转化成base编码类似于图片转base64,也就是把源码 地图source map转换编码成base64嵌入到eval里面)后添加到eval()中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。eval-cheap-source-map类似eval-source-map,每个模块使用eval()执行。这是 "cheap(低开销)" 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像evaldevtool。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 服务器。而是只将其用于错误报告工具。
也就是说只能用特定的工具才会显现
nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。
警告
这仍然会暴露反编译后的文件名和结构,但它不会暴露原始代码。
提示
如果默认的 webpack minimizer 被覆盖 (例如自定义 terser-webpack-plugin 选项), 请确保将其替换配置为 sourceMap: true 以启用 SourceMap 支持。