我曾为配置 Webpack 感到痛不欲生，直到我遇到了这个流式配置方案

config.resolve.alias
  .set(key, value)
  .set(key, value)
  .delete(key)
  .clear()

// 清空当前 Map 的所有属性
clear()
// 通过键值从 Map 移除单个配置.
delete(key)
// Map中是否存在一个配置值的特定键，返回真或假
has(key)
// 返回 Map中已存储的所有值的数组
values()
//  提供一个对象，这个对象的属性和值将映射进 Map。第二个参数为一个数组，表示忽略哪些属性
merge(obj, omit)
// handler: ChainedMap => ChainedMap
// 一个把ChainedMap实例作为单个参数的函数
batch(handler)
// condition: Boolean
// whenTruthy: ChainMap -> any, 条件为真时执行
// whenFalsy: ChainSet -> any, 条件为假时执行
when(condition, whenTruthy, whenFalsy)
// 获取 Map 中相应键的值
get(key)
// 先调用 get，如果找不到对应的值, 就返回 fn 函数返回的结果
getOrCompute(key, fn)
// 配置键值对
set(key, value)

// 末尾增加一个值
add(value)
// 在开始位置增加一个值
prepend(value)
// 清空 set 内容
clear()
// 删除某个值
delete(value)
// 判断是否有某个值
has(value)
// 返回值列表
values()
// 合并给定的数组到 Set 尾部。
merge(arr)
// handler: ChainSet => ChainSet
// 一个把 ChainSet 实例作为单个参数的函数
batch(handler)
// condition: Boolean
// whenTruthy: ChainSet -> any, 条件为真时执行
// whenFalsy: ChainSet -> any, 条件为假时执行
when(condition, whenTruthy, whenFalsy)

devServer.hot(true);

// 上述方法等效于:
devServer.set('hot', true);

extend(methods) {
  this.shorthands = methods;
  methods.forEach(method => {
    this[method] = value => this.set(method, value);
  });
  return this;
}

this[method] = value => this.set(method, value);

const Config = require('webpack-chain');

const config = new Config();

// 一系列链式操作之后
// 得到最后的 webpack 对象
console.log(config.toConfig())

config.entryPoints.clear() // 会把默认的入口清空
config.entry('entry1').add('./src/index1.tsx')//新增入口
config.entry('entry2').add('./src/index2.tsx')//新增入口

config.output
      .path("dist")
      .filename("[name].[chunkhash].js")
      .chunkFilename("chunks/[name].[chunkhash].js")
      .libraryTarget("umd")

// 可以发现 resolve.alias 其实是一个 ChainMap 对象
config.resolve.alias
  .set('assets',resolve('src/assets'))
  .set('components',resolve('src/components'))
  .set('static',resolve('src/static'))
  .delete('static') // 删掉指定的别名

// 先指定名字(这个名字是自定义的)，然后通过 use 添加插件
config
  .plugin(name)
  .use(WebpackPlugin, args)

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 先指定名字(这个名字可以自定义)，然后通过 use 添加插件，use 的第二个参数为插件参数，必须是一个数组，也可以不传
config.plugin('extract')
  .use(ExtractTextPlugin, [{
    filename: 'build.min.css',
    allChunks: true,
  }])

config.plugins.delete('extract')

const htmlWebpackPlugin = require('html-webpack-plugin');

config.plugin('html')
  .use(htmlWebpackPlugin)
  .before('extract')

config.plugin('html')
  .use(htmlWebpackPlugin)
  .after('extract')

// 使用 tap 方法修改参数
config
  .plugin(name)
  .tap(args => newArgs)

// 通过 init 方法，返回一个实例，这将代替原有的实例化过程
config
  .plugin(name)
  .init((Plugin, args) => new Plugin(...args));

config.module
  .rule(name)
    .use(name)
      .loader(loader)
      .options(options)

config.module
  .rule('ts')
  .test(/\.tsx?/)
  .use('ts-loader')
    .loader('ts-loader')
    .options({
      transpileOnly: true
    })
    .end()

config.module
  .rule('ts')
  .test(/\.tsx?/)
  .use('ts-loader')
    .loader('ts-loader')
    .tap(option => {
      // 一系列
      return options;
    })
    .end()

// 通过 uses 对象的 delete 方法，根据 loader 的 name 删除
config.module
  .rule('ts')
  .test(/\.tsx?/)
  .uses.delete('ts-loader')

config.optimization.splitChunks({
     chunks: "async",
     minChunks: 1, // 最小 chunk ，默认1
     maxAsyncRequests: 5, // 最大异步请求数， 默认5
     maxInitialRequests : 3, // 最大初始化请求数，默认3
     cacheGroups:{ // 这里开始设置缓存的 chunks
         priority: 0, // 缓存组优先级
         vendor: { // key 为entry中定义的 入口名称
             chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是async)
             test: /react|vue/, // 正则规则验证，如果符合就提取 chunk
             name: "vendor", // 要缓存的 分隔出来的 chunk 名称
             minSize: 30000,
             minChunks: 1,
         }
     }
});

// 添加一个 minimizer
config.optimization
  .minimizer('css')
  .use(OptimizeCSSAssetsPlugin, [{ cssProcessorOptions: {} }])
// 移除 minimizer
config.optimization.minimizers.delete('css')
// 修改 minimizer 插件参数
config.optimization
  .minimizer('css')
  .tap(args => [...args, { cssProcessorOptions: { safe: false } }])

config.when(
  process.env.NODE === 'production',
  config.plugin('size').use(SizeLimitPlugin)
)