提供更灵活的 Webpack 扩展方法

[xiaoiver]

问题描述

目前 Lavas 提供了 extend 方法用于扩展内置的 Webpack 配置对象。这种方式直接暴露原始的 Webpack 配置对象给开发者，在增加 loader/plugin 这样的场景下，还能通过如下方式进行：

extend(config) {
  config.plugins.push(new MyPlugin());
}

但是一旦涉及到修改 Lavas 内置的某些配置，例如针对 vue-loader 的配置，就很不优雅了。常常只能在控制台将整个对象打印出来，才能定位到需要修改的某个 loader/plugin。

// 得这样才能找到已有的针对 vue-loader 的配置
config.module.rules[0].use[0].options.loader

解决方案

看来核心问题是仅仅暴露给开发者一个对象，不利于修改 Lavas 已有的配置。而且无法对内置的 plugin/loader 取名供开发者便捷地引用修改。
参考 poi，使用了 webpack-chain 对 Webpack 配置对象进行了封装，使得开发者可以使用链式调用的方式修改，同时可以对 plugin/loader 规则 取自定义的名字，更加便于开发者修改：

// 修改已有关于 babel-loader 的配置
config.module
  .rule('compile') // 给这个规则取名 compile
    .use('babel')
      .tap(options => merge(options, { plugins: ['babel-plugin-syntax-object-rest-spread'] }));

所以在保留已有 extend() 方法的基础上，可以新增一个针对这种方式的扩展方法extendWithWebpackChain()：

extendWithWebpackChain(config, {type, env}) {
  // 删除 Lavas 内置的 skeleton 插件
  config.plugins.delete('skeleton') // Lavas 内部使用 skeleton 命名这个插件
}

[xiaoiver]

增加了 extendWithWebpackChain(config, {type, env}) 方法，相较于 extend() 方法提供了更加友好的修改方式。设想以下场景：

1. 修改 Lavas 已有规则。Lavas 内置了 vue-loader 处理 .vue 文件，如果使用 extend，只能通过下面的方法访问深层次的 webpack 配置对象，弊端十分明显。

// 使用 extend 方法直接修改 webpack 配置对象
config.module.rules[0].use[0].options.loader

而使用 extendWithWebpackChain 方法，可以通过好记的名称访问到某个规则：

// 扩展 babel
config.module
  .rule('js')
    .use('babel')
      .tap(options => merge(options, { plugins: ['babel-plugin-syntax-object-rest-spread'] }));

2. 干预 Lavas 内置插件的初始化创建。Lavas 内置使用了某个 Plugin，例如输出错误信息的 FriendlyErrorPlugin。现在用户希望修改传入这个插件构造函数的参数。使用 extend 是无法做到的，因为此时插件已经由 Lavas 初始化完成。而使用 extendWithWebpackChain 可以做到，Lavas 内部使用的所有插件都可以通过 config.plugin(name) 方式访问到：

extendWithWebpackChain: (config) => {
  // 每个插件都可以按名称访问
  config.plugin('friendly-error').init((Plugin, args) => {
    let customParams = {}; // 扩展传入插件构造函数的参数
    return new Plugin(...args, customParams)
  });
}

[xiaoiver]

稍后会在文档中详细列出 Lavas 内部使用的全部 Webpack 插件和 Loader，便于开发者便捷引用修改。