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()