webpack4（五）：sourcemap

什么是sourcemap？

sourcemap，从字面理解就是source+map，源码地图的意思。打包后的代码因为已经压缩混淆过了，这时要想调试就不太容易，我们必须定位到源码的某行才能找到问题所在，因此打包代码时，必须生成一份sourcemap文件，让我们可以达到调试的目的。

sourcemap的几种模式

1、eval

每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.

2、source-map

生成一个SourceMap文件.

3、hidden-source-map

和 source-map 一样，但不会在 bundle 末尾追加注释.

4、inline-source-map

生成一个 DataUrl 形式的 SourceMap 文件.

5、eval-source-map

每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.

6、cheap-source-map

生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）

7、cheap-module-source-map

生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

sourcemap如何使用

相关的配置很简单，只需在webpack的配置文件加一行：

let path = require("path");
module.exports = {
    mode:"none",
    entry:"./src/main.js",
    output:{
        filename:"build.js",
        path:path.join(__dirname,"dist")
    },
    devtool:"source-map"
}

这样就开启了sourcemap，打包会生成main.js.map这样的映射文件，但是我们在实际使用时并不推荐直接用source-map选项。因为这样会生成行和列的完整信息，而我们在调试代码时，一般只需定位到行即可，所以推荐cheap模式。
1）开发环境推荐：
cheap-module-eval-source-map
2）生产环境推荐：
cheap-module-source-map

原因

1、使用 cheap 模式可以大幅提高 souremap 生成的效率。大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息。

2、使用 eval 方式可大幅提高持续构建效率。官方文档提供的速度对比表格可以看到 eval 模式的编译速度很快。

3、使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。

4、使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得肥肠大。