webpack-chain笔记

663 阅读2分钟

webpack-chain 版本:6.5

关键类

Chainable

核心类Config继承自ChainableMap,最终也继承自Chainable。
Chainable通过constructor(parent)传入,end()返回parent的方式使链式调用可连续进行下去。 如:

new Config(parent).xxx().yyy().zzz().end().parentFn()

ChainedMap

extends Chainable,数据存储在store属性中。

方法

除非另有说明,否则这些方法将返回 ChainedMap , 允许链式调用这些方法。


// 批量实现简写方法
extend(methods: string[]) {
    this.shorthands = methods;
    methods.forEach((method) => {
        this[method] = (value) => this.set(method, value);
    });
    return this;
}

clear()
delete(key)
get(key)
has(key)
set(key, value)
/**
 * @param obj 要合并的对象
 * @param omit 忽略的属性列表
** /
merge(obj, omit = [])
clean(obj)

// 每个值可设置这2个值来进行Map中的排序功能{__before?: string, __after?: string},值为前后的key
order()

// 有就获取,没有就设置为fn()返回值
getOrCompute(key, fn)

// 返回(order过后的)键值对对象或者undefined
entries(): Object | undefined

// 清除obj中的空值(undefined、空数组、空对象)
clean(obj): Object

// 一看就懂了
when(
    condition: boolean,
    whenTruthy: (this) => void = Function.prototype,
    whenFalsy:  (this) => void = Function.prototype,
)

ChainedSet

extends Chainable,数据存储在store属性中。

方法

除非另有说明,否则这些方法将返回 ChainedSet , 允许链式调用这些方法。

add(value)
prepend(value)
clear()
delete(value)
values()
has(value)
merge(arr)

// 一看就懂了
when(
    condition: boolean,
    whenTruthy: (this) => void = Function.prototype,
    whenFalsy:  (this) => void = Function.prototype,
)

Config

extends ChainedMap

属性

// 开发服务器设置
devServer = new DevServer(this);
// 入口设置
entryPoints = new ChainedMap(this);
// 模块
module = new Module(this);
node = new ChainedMap(this);
// 优化设置
optimization = new Optimization(this);
output = new Output(this);
// 性能设置
performance = new Performance(this);
// 插件
plugins = new ChainedMap(this);
// 解析
resolve = new Resolve(this);
// 解析的加载器
resolveLoader = new ResolveLoader(this);

方法


entry(name): ChainedSet

plugin(name): Plugin

toConfig(): {
    node: Object | undefined,
    output: Object | undefined,
    resolve: ResolveConfig,
    resolveLoader: ResolveLoaderConfig,
    devServer: DevServerConfig,
    module: ModuleConfig,
    optimization: OptimizationConfig(),
    plugins: PluginConfig[],
    performance: Object | undefined,
    entry: Object,
}

// 把toConfig的内容输出为string
toString(options)

其他相关类

Orderable

(ClassA) => ClassB(继承以下3个方法)

// 设置前置对象名称
before(name: string)
// 设置后置对象名称
after(name: string)
merge(obj, omit = [])

Plugin

Orderable(extends ChainedMap)

constructor(parent, name, type = 'plugin')

use(plugin, args = [])
// 添加修改参数的方法
tap(f) {
  ...
  this.set('args', f(this.get('args') || []));
  return this;
}

DevServer

extends ChainedMap
allowedHosts可链式添加,其他属性用set(key, value)直接设置或者简写方式设置。

Module

extends ChainedMap

constructor(parent)
// 属性
rules = new ChainedMap(this)
defaultRules = new ChainedMap(this)

// 方法
defaultRule(name): Rule
rule(name): Rule

Rule

Orderable(extends ChainedMap)

constructor(parent, name, ruleType = 'rule')

uses = new ChainedMap(this);
include = new ChainedSet(this);
exclude = new ChainedSet(this);
rules = new ChainedMap(this);
oneOfs = new ChainedMap(this);
resolve = new Resolve(this);

use(name): Use
rule(name): Rule
oneOf(name): Rule

Use

Orderable(extends ChainedMap)

constructor(parent, name)
// 添加修改参数方法
tap(f) {
  this.options(f(this.get('options')));
  return this;
}

Optimization

constructor(parent)
minimizers = new ChainedMap(this);

minimizer(name): Plugin

Resolve

extends ChainedMap

constructor(parent)
alias = new ChainedMap(this);
aliasFields = new ChainedSet(this);
descriptionFiles = new ChainedSet(this);
extensions = new ChainedSet(this);
mainFields = new ChainedSet(this);
mainFiles = new ChainedSet(this);
modules = new ChainedSet(this);
plugins = new ChainedMap(this);

plugin(name): Plugin