如何使用 SourceMap 及 配置

先介绍下 SourceMap 的作用吧 ， 其实就是打包后 我们阅览页面时 有时代码会出现 bug 或者 有JS 报错 ， 但当我们查看问题是 错的代码指向的是 我们打包后的 JS文件 ， 这样我们就很难再源代码中 找出是哪个文件 哪行代码出现了问题 ， SourceMap 就是解决这个问题的 ， 它可以准确的定位到源代码中的错误位置 ！

首先 webpack.config.js 配置文件里 先把模式设置为 开发中模式，否则您是看不出来的！

  // 模式
  mode: 'development',   

接下来配置下开发工具

  // 模式
  mode: 'development',  
  devtool: 'source-map',

现在我们打包可以看到效果了 ， 而且dist 目录 多了一个 .map 后缀的文件！ 其实我们也可以不需要把这文件 单独显示打包出来 。

  // 模式
  mode: 'development',    
  devtool: 'inline-source-map',

这样的话 我们在打包 就不会有 再 .map 文件了 ，其实它是以 base64未 打包在 main.js 的最底部了 ！

devtool 有很多种 模式 ， 大家可以自己测试下看 。

eval	           //每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.
source-map	       //生成一个SourceMap文件.
hidden-source-map	//和 source-map 一样，但不会在 bundle 末尾追加注释.
inline-source-map	//生成一个 DataUrl 形式的 SourceMap 文件.
eval-source-map	    //每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.
cheap-source-map	//生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	//生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

这里有相应的模式 和 介绍 ， 大家可以根据自己的需求配置相应的模式

推荐模式：

  // 模式
  mode: 'development',      //  开发模式 配置
  devtool: 'cheap-module-eval-source-map',

  // 模式
  mode: 'production', 
  devtool: 'cheap-module-source-map',

完结 ！！！