13. source-map构建后的代码与源码的映射关系

source-map：提供源代码到构建后代码的映射技术(如：构建后代码出错，通过映射关系可以方便的追踪源代码中的错误)

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

• source-map: 会生成一个外部的source-map文件，当文件出错时，能够得到错误代码准确信息和源代码的错误位置。
• inline-source-map：将source-map内联到js文件中，只生成一个内联的source-map，当文件出错时，能够得到错误代码准确信息和源代码的错误位置。
• hidden-source-map：相当于外部source-map，当文件出错时，能够得到错误代码准确信息和构建后的代码的错误位置，无法追踪到源代码的错误位置。
• eval-source-map：内联的source-map，为每个文件都生成对应的source-map，都在eval中，当文件出错时，能够得到错误代码准确信息和源代码的错误位置。
• nosources-source-map：外部，当文件出错时，能够得到错误代码准确信息，但是没有源代码的错误信息。
• cheap-source-map：外部，当文件出错时，能够得到错误代码准确信息和源代码的错误位置所在的行，无法准确找到是代码的哪个位置。
• cheap-module-source-map：外部，当文件出错时，能够得到错误代码准确信息和源代码的错误位置。

内联和外部的区别：1.外部生成独立的source-map文件，2.内联构建速度更快。3.内联会让代码体积变大，所以生产环境下不用内联

开发环境：

• 速度比较：eveal>inline>cheap>…，eval-cheap-souce-map最快
• 调试更友好：cheap-module>cheap-module-souce-map
• 折中的选择：eval-source-map

生产环境：

• 需要隐藏源代码：nosources-source-map / hidden-source-map
• 希望调试友好：source-map / cheap-module-souce-map

1. 修改webpack的配置文件webpack.json.js

   module.exports = {
         
         
   	...
   	devtool: 'source-map'
   }
   

2. 打包

   webpack
   

3. 可以在打包后的文件夹中看到.map为后缀的文件