SourceMap

类型

模式	解释
eval	每个 module 会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@sourceURL
source-map	生成一个 SourceMap 文件
hidden-source-map	和 source-map 一样，但不会再 bundle 末尾追加注释
inline-source-map	生成一个 DataUrl 形式的 SourceMap 文件
eval-source-map	每个 module 会通过 eval()来执行，并且生成一个 DataUrl 形式的 SourceMap
cheap-source-map	生成一个没有列信息(column-mappings)的 SourceMaps 文件，不包含 loader 的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一个没有列信息（column-mappings）的 SourceMaps 文件，同时 loader 的 sourcemap 也被简化为只包含对应行的

要注意的是，生产环境我们一般不会开启 sourcemap 功能，主要有两点原因:

• 1. 通过 bundle 和 sourcemap 文件，可以反编译出源码――—-也就是说，线上产物有 soucemap 文件的话，就意味着有暴漏源码的风险。
• 2. 我们可以观察到,sourcemap 文件的体积相对比较巨大,这跟我们生产环境的追求不同(生产环境追求更小更轻量的 bundle)。

一道思考题

有时候我们期望能第一时间通过线上的错误信息，来追踪到源码位置，从而快速解决掉 bug 以减轻损失。但又不希望 sourcemap 文件报漏在生产环境，有比较好的方案吗?

在 mode 为“development”模式下，打包的 sourceMap 默认为 eval，如果想关闭，可以加入 devtool:false,如果想改成其他模式，则改成 devtoop:"cheap-module-source-map"

在开发环境中，推荐使用 cheap-module-source-map，它不单可以帮我们生产一个 map 文件，而且它不记录列数，增加效率，同时类似于 babel 这种解析的 source-map 混杂进来以后，也不会导致我们代码行数识别的一个问题