介绍SourceMap

1. 什么是 Source Map

Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。

2. 为什么使用SourceMap

我们线上的代码一般都是经过打包的，如果线上代码报错了，调试起来非常的困难，很难快速定位到报错代码的具体位置。如果开启了SourceMap，就可以直接定位到报错代码位置，调试程序变得很容易

常见的源码转换，主要是以下三种情况：

• 压缩，减小体积
• 多个文件合并，减少 HTTP 请求数
• 其他语言编译成 JavaScript

3. webpack中配置SourceMap

在 webpack.config.js 文件中配置 devtool 就可以使用 Source Map

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: "source-map"
};

建议以下 7 种可选方案：

• source-map：外部。可以查看错误代码准确信息和源代码的错误位置。

• inline-source-map：内联。只生成一个内联 Source Map，可以查看错误代码准确信息和源代码的错误位置

• hidden-source-map：外部。可以查看错误代码准确信息，但不能追踪源代码错误，只能提示到构建后代码的错误位置。

• eval-source-map：内联。每一个文件都生成对应的 Source Map，都在 eval 中，可以查看错误代码准确信息 和 源代码的错误位置。

• nosources-source-map：外部。可以查看错误代码错误原因，但不能查看错误代码准确信息，并且没有任何源代码信息。

• cheap-source-map：外部。可以查看错误代码准确信息和源代码的错误位置，只能把错误精确到整行，忽略列。

• cheap-module-source-map：外部。可以错误代码准确信息和源代码的错误位置，module 会加入 loader 的 Source Map。

内联和外部的区别：

• 外部生成了文件（.map），内联没有（以 base64 的形式插入到 sourceMappingURL中）。
• 内联构建速度更快。

参数	参数解释
eval	打包后的模块都使用 eval() 执行，行映射可能不准；不产生独立的 map 文件
cheap	map 映射只显示行不显示列，忽略源自 loader 的 source map
inline	映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件
module	增加对 loader source map 和第三方模块的映射

总结

1. 开发环境：需要考虑速度快，调试更友好

速度快( eval > inline > cheap >... )

• eval-cheap-souce-map

• eval-source-map

调试更友好

• souce-map

• cheap-module-souce-map

• cheap-souce-map

最终得出最好的两种方案 --> eval-source-map（完整度高，内联速度快） / eval-cheap-module-souce-map（错误提示忽略列但是包含其他信息，内联速度快）

2. 生产环境：需要考虑源代码要不要隐藏，调试要不要更友好

• 内联会让代码体积变大，所以在生产环境不用内联

• 隐藏源代码

  1. nosources-source-map 全部隐藏（打包后的代码与源代码）

  2. hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

最终得出最好的两种方案 --> source-map（最完整） / cheap-module-souce-map（错误提示一整行忽略列）