webpack-sources注意：无特殊说明，一下介绍的类都继承了 Source 类，只列出了类独有的方法和属性，公

此文针对 webpack 生成 sourcemap 的工具使用进行总结，是通过自己研究获得，不足之处还望指出。

Source 是 webpack-sources 的所有实现类的基类，不要直接使用它（它是一个抽象类），介绍他的目的是为了介绍其他实现类的公共方法

API

名称	类型	参数	备注
source	() => source	~	获得传入实例中的字符串代码
buffer	() => BufferString	~	获得 Buffer 字符串代码
size	() => BufferString.length	~	获得 source 转换为 BufferString 的长度
map	(options) => SourceMapObj	{columns: false}	获取传入代码的 sourcemap 信息，参数为生成的 sourcemap 是否包含列信息
sourceAndMap	(options) => ({source, map})	{columns: false}	此方法整合了 `source` 和 `map` 方法的返回值，将其一并返回
updateHash(hash)	(hash) => void	要更新替换的 hash 值	更新当前 Source 的 hash 值

注意： 无特殊说明，一下介绍的类都继承了 Source 类，只列出了类独有的方法和属性，公共方法和属性将不再介绍。

OriginalSource 类用来包装原始的源码字符串，可以生成代码的 sourcemap 对象，或者当做其他 Source 类的 code 参数值传入。

使用

const {OriginalSource} = require('webpack-sources');
const souerce = new OriginalSource(code, name);

属性和方法

名称	类型	参数	备注
_value	string	Source	~
_valueAsBuffer	BufferString	~	储存着实例化是传入的 Buffer 字符串表示
_name	string	~	储存着实例化是传入的 name 属性
getName	() => string	~	返回 _name 属性值
node	(options) => SourceNode	{columns: false}	返回值是源码被拆分成行列的对象，这个对象将会最终生成 sourcemap
listMap	() => SourceMap	~	如果生成的sourcemap 不包含列信息，webpack 将使用source-list-map去更快的生成对应的 sourcemap

日常打包时，最终生成文件可能会包含很多源文件，这个类就是用来将多个源文件组合，并生成一个包含所有源文件信息的 sourcemap 对象。

使用

const { ConcatSource } = require('webpack-sources');
const cs = new ConcatSource(...Array<string|Source>);

属性和方法

这个类的作用是将一个 sourcemap 映射到另一段代码上，要完成这个映射关系，需要生成 sourcemap 的这段代码和要映射的代码结构相同。也就说，sourcemap 是最初的代码映射，那么他只能映射到初始代码经过 n 此处理的代码上

使用

const { SourceMapSource } = require('webpack-sources');
const sms = new SourceMapSource(code, name, sourceMap);

一般情况下，仅使用前三个参数即可，如果不能满足需求，可自行研究---> 传送门

这个类的方法和 Source 类完全相同

剩余的类后面在补充说明，这个三个类的组合使用可以实现一个简单的 sourcemap 生成器。