source-map

1. 什么是 source-map

source-map 是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

2. 为什么需要 source-map

主要是生产环境有隐匿源代码的要求,JS又是运行时语言无法编译成字节码加密等。所以采用混淆源代码的方式，但是这样就无法调试了，所以需要 source-map 文件来映射到源代码。

3. 怎么使用 source-map

通过设置 devtool 来使用打包的source-map级别，所有的参数值请查看官网，以下是一些常用的配置：

• false : 布尔值。完全不使用 source-map，不生成任何和 source-map 相关的任何内容。
• eval : 字符串。不生成 source-map 文件，但是在打包生成的文件中会使用 eval 函数，并且在 eval 函数的代码最后添加注释 //#sourceURL= 指向源文件；它在浏览器执行时会被解析，在调试面板中会生成对应的文件目录。除了完全不使用 source-map 外，eval 打包的速度是最快的。
• source-map : 字符串。会生成一个独立的完整的 source-map 文件，在打包生成的文件最后会有一个注释指向该 source-map 文件，在浏览器中解析执行时会被还原出所有的源代码文件。
• eval-source-map : 字符串。不生成 source-map 文件，但是在打包生成的文件中会使用 eval 函数，并且将 source-map 的具体内容以 DataURL 的形式添加到 eval 函数的最后面。浏览器在请求打包生成的文件时就会一同将 source-map 的内容请求下来并解析执行。
• cheap-source-map : 字符串。和设置 source-map 属性值的表现类似，会生成独立的 source-map 文件，但是只有行映射，没有列映射。因此比 source-map 效率会高一些。
• cheap-module-source-map : 字符串。和设置 cheap-source-map 属性值的表现类似，但是，如果代码中使用 loader 转换代码，使用 cheap-source-map 后浏览器还原的源文件和真实的源文件还有差异（例如：行、列等的会对应不上），使用 cheap-module-source-map 则一致。
• inline-source-map : 字符串。不生成 source-map 文件，但是 source-map 的具体内容会以 DataURL 的形式添加到打包生成的文件最后。浏览器在请求打包生成的文件时就会一同将 source-map 的内容请求下来并解析执行。
• hidden-source-map : 字符串。和设置 source-map 属性值的表现类似，会生成一个独立的完整的 source-map 文件，但是在打包生成的文件最后指向 source-map 文件的注释会被删除，也就是不会对 source-map 文件进行引用 ，在浏览器中也就无法准确地定位错误。
• nosources-source-map : 字符串。会生成 source-map 文件，但是生成的 source-map 只有错误信息的提示，不会生成源代码文件。

4. 生产环境启动代码压缩编译之后，如果报错了，如何调试。

一般生产环境会使用错误日志上报系统，我之前项目中使用的是sentry哨兵，需要在webpack配置中配置sentry

new SentryWebpackPlugin({
    release:"v1.0.1",
    include: ".",
    ignore: ["node_modules", "webpack.config.js"],
    configFile: "sentry.properties"
})

在每次打包时，会自动将打包生成的source-map 文件上传到sentry。用户访问生产环境时只有混淆的源代码没有source-map，在生产环境前端报错时会将错误的chunk和代码行数上报到sentry，我们在后台查看sentry日志时就可以看到 通过 source-map 反向编译之后的源代码和错误代码行数等信息。