sourceMap如何生成，如何创建呢sourcemap 是关联编译后的代码和源码的，通过一个个行列号的映射。 sour

sourcemap 是关联编译后的代码和源码的，通过一个个行列号的映射。

sourceMap 是怎么建立源代码和目标代码也就是编译后的代码进行映射的。其实就是源代码通过AST转换的时候存在位置信息，然后最终打印的时候，又存在了位置信息，但是两者之间又是怎么来建立联系的。

{
　　　　version : 3,
　　　　file: "out.js",
　　　　sourceRoot : "",
　　　　sources: ["foo.js", "bar.js"],
　　　　names: ["a", "b"],
　　　　mappings: "AAgBC,SAAQ,CAAEA;AAAEA",
      sourcesContent: ['const a = 1; console.log(a)', 'const b = 2; console.log(b)']
}

version：sourcemap 的版本，一般为 3
file：编译后的文件名
sourceRoot：源码根目录
names：转换前的变量名
sources：源码文件名
sourcesContent：每个 sources 对应的源码的内容
mappings：一个个位置映射。

那么到底源码和目标代码是如何进行链接的呢，如何进行联系的之前学习babel 插件的适合，发现其实在

源代码编译经过parse 阶段的适合，其实会出现loc 字段包含有当前元素位置信息。而当你最终打印转换后的代码形成最终的目标代码，又会出现目标代码的位置信息源代码和目标代码位置信息再去建立一下关联。

那么eval 代码如何进行调试呢？主要通过



eval(`function a(a, b) 
{
   return a + b }
   console.log('a(1,2)', a(1, 2));
   //# sourceURL= s.js
   `)

每当debugg 当前这个eval 就会立刻生成一个s.js 文件，直接在source里面进行debugger.

cheap

其实就是牺牲精度，只映射到列，不关注行。

module

1 一句话：关联所有的sourceMap 目标为了调试最初的源码。

那怎么将之前的各种配置项组合。可以通过插件进行自由组合

const webpack = require('webpack');

module.exports = {
  // 其它配置选项...
  devtool: 'source-map', // 配置生成 source map，也可以是其它值，如 'eval', 'cheap-source-map' 等
  plugins: [
    new webpack.SourceMapDevToolPlugin({
       // fileName 这个属性是必传的
      filename: '[file].map', // 生成的 source map 文件名
      noSources: true // 禁用源代码映射
    })
  ]
};