SourceMap 启用时 devtool各个值的含义

SourceMap 启用时 devtool各个值的含义

开发环境

以下选项非常适合开发环境：

• eval

eval - 每个模块都使用 eval() 执行， 并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。

• eval - source - map

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

• cheap - eval - source - map

cheap - eval - source - map - 类似 eval - source - map， 每个模块使用 eval() 执行。 这是“ cheap(低开销)” 的 source map， 因为它没有生成列映射(column mapping)， 只是映射行数。 它会忽略源自 loader 的 source map， 并且仅显示转译后的代码， 就像 eval devtool。

• cheap - module - eval - source - map

cheap - module - eval - source - map - 类似 cheap - eval - source - map， 并且， 在这种情况下， 源自 loader 的 source map 会得到更好的处理结果。 然而， loader source map 会被简化为每行一个映射(mapping)。

特定场景

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

inline - source - map - source map 转换为 DataUrl 后添加到 bundle 中。

cheap - source - map - 没有列映射(column mapping) 的 source map， 忽略 loader source map。

inline - cheap - source - map - 类似 cheap - source - map， 但是 source map 转换为 DataUrl 后添加到 bundle 中。

cheap - module - source - map - 没有列映射(column mapping) 的 source map， 将 loader source map 简化为每行一个映射(mapping)。

inline - cheap - module - source - map - 类似 cheap - module - source - map， 但是 source mapp 转换为 DataUrl 添加到 bundle 中。

生产环境

这些选项通常用于生产环境中：

• none

  (none)（ 省略 devtool 选项） - 不生成 source map。 这是一个不错的选择。

• source - map

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

• hidden - source - map

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

• nosources - source - map

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