webpack-chain 速查手册之 ChainedSet

webpack-chain GitHub 中文文档
webpack-chain 速查手册之 ChainedMap

Set 和 Map 数据类型

Set 就是一组值的集合，值允许任何类型，但不可以重复。会记住元素原始插入顺序所以是可迭代的。如果传入重复元素，会在Set中自动被过滤，可以利用Set来去重。
初始化Set需要传入一个数组，或者直接初始化空Set：new Set()

var s = new Set([1, 2, 3, 2, 1, '哈哈'])
console.log(s) // Set(2) {1, 2, 3, '哈哈'} 自动去除重复项
s.add(4) // 添加新元素 4 
s.delete(3) // 删除元素 3
s.has(3) // 是否存在元素 3：false 
s.clear() // 移除s中所有项

Map以[键，值]的形式存储数据，并且能够记住键的原始插入顺序。键和值允许任何数据类型，键不可重复是惟一的，可以极高效地查找数据。
初始化Map需要传一个二维数组，或者直接初始化一个空Map：new Map()

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]])
console.log(m) // Map(3) {"Michael" => 95, "Bob" => 75, "Tracy" => 85}
m.set('Adam', 67); // 添加新的key-value
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.clear() // Map {}  

获取它们的元素个数的属性是size，如：

console.log(new Set([1,2,1,2]).size) // 2 

它们都拥有遍历方法：

• keys()：返回所有键名
• values()：返回所有键值
• entries()：返回所有成员
• forEach(value, key)：遍历所有成员
  由于Set中的数据没有键名只有值，或者说键和值是同一个，遍历时返回的 key 和 value 是一样的。

console.log(new Set([1,2,3,4]).values()) // SetIterator {1, 2, 3, 4}
console.log(new Set([1,2,3,4]).entries()) // SetIterator {1 => 1, 2 => 2, 3 => 3, 4 => 4}
console.log(new Map([['name','jackson'],['age',11]]).keys()) // MapIterator {"name", "age"}
new Map([['name','jackson'],['age',11]]).forEach((value, key) => { console.log(key, value)} )  
// name jackson
// age 11

ChainedSet的API和方法:

操作类似于JavaScript Map。除非另有说明，否则这些方法将返回 ChainedSet , 允许再链式调用这些方法。
添加一个值用add(value)， 同时添加多个用merge(arr)

// 添加/追加 给Set末尾位置一个值.
// value: *
add(value)

// 添加 给Set开始位置一个值.
// value: *
prepend(value)

// 移除Set中全部值.
clear()

// 移除Set中一个指定的值.
// value: *
delete(value)

// 检测Set中是否存在一个值.
// value: *
// returns: Boolean
has(value)

// 返回Set中值的数组.
// returns: Array
values()

// 连接给定的数组到 Set 尾部。
// arr: Array
merge(arr)

// 对当前配置上下文执行函数。
// handler: Function -> ChainedSet
  // 一个把 ChainedSet 实例作为单个参数的函数
batch(handler)

// 条件执行一个函数去继续配置
// condition: Boolean
// whenTruthy: Function -> ChainedSet
  // 当条件为真，调用把 ChainedSet 实例作为单一参数传入的函数
// whenFalsy: Optional Function -> ChainedSet
  // 当条件为假，调用把 ChainedSet 实例作为单一参数传入的函数
when(condition, whenTruthy, whenFalsy)

被标记为ChainedSet的属性

• config.entry(name) 入口

config
  .entry('app') // 入口文件名称为 app
    .add('./src/main.js') // 入口文件为 ./src/main.js

• config.resolve.modules 解析模块时应该搜索的目录

config.resolve.modules
  .add('node_modules')
  .prepend('node_modules')

• resolve aliasFields 指定解析规范 默认值为 'browser'
• resolve.descriptionFields 指定用于描述的 JSON 文件 默认值是'package.json'
• resolve.extensions 引入模块时可省略的文件扩展名 将按该配置项值的顺序依次去尝试解析，默认值为['.js', '.json', '.wasm']
• resolve.mainFields 决定在 package.json 中用哪个字段导入模块 默认值是['module', 'main']。
  如果引入模块时的路径指向一个目录，解析时会在目录的package.json下去按顺序查找的resolve.mainFields指定的字段的值作为最终解析路径，如果没找到一个有效路径，会尝试找resolve.mainFiles指定的文件名。
• resolve.mainFiles 解析模块目录时要查找的文件名 默认值是['index']。
  以上几个模块API配置方式和config.resolve.modules类似就不一一展开了，在下面一起演示下。
  具体使用请查阅解析(Resolve)

config.resolve
  .extensions // 将数组的元素追加到 extensions 中
    .merge(['.mjs', '.vue', '.scss', '.sass', '.jsx']) // 以数组的形式同时添加多个
    .end() // 回到 resolve API 层级
  .mainFields
    .add('main') // 一个一个添加
    .add('browser')
    .end()
  .mainFiles
    .prepend('main') // 添加到 mainFiles 的第一项

• config.resolveLoader.moduleExtensions和config.resolve下的API配置方式相同，且webpack 5就废弃了，直接忽略吧。
• config.devServer.allowedHosts 允许访问开发服务器的服务白名单

config.devServer.allowedHosts
  .add('subdomain.host.com')
  .prepend('subdomain2.host.com')
  .clear()