source-map

source-map(简而言之就是方便调试用的)

1. 作用：source-map是从已转换的代码，映射到原始的源文件使浏览器可以重构原始源并在调试中显示重建的原始源

2. 使用：

   //webpack配置文件中配置
   module.exports = {
       devtool:"source-map"
   }
   ​
   //浏览器根据注释，查找相应的 source-map，根据source-map还原代码
   

3. 应用：

   • 帮助浏览器还原具体的文件
   • 可以定位到bug出现的文件（配置mode:"development"也可以达到效果，因为默认devtool默认值为eval）

4. 模式（部分）

   1. eval-source-map：只生成遇到bug之前执行的源代码
   2. inline-source-map：不管有没有bug，生成全部源代码
   3. cheap-source-map：会生成sourcemap，但会更高效，因为没有生成列映射（列映射就是错误具体在一行的哪一部分）
   4. cheap-module-source-map：即使loader对源码进行了特殊的处理，如babel，依然会保留源格式。

5. 多个值组合格式：

   [ inline- | hidden- | eval- ] [nosources- ] [cheap- [module- ]]source-map

6. 使用场景：

   • 开发阶段：source-map（vue） 或 cheap-module-source-map（react）
   • 测试阶段：source-map 或 cheap-module-source-map
   • 发布阶段：false、不写