编写boi插件

如果直接配置webpack仍然难以满足业务需求，boi还提供了插件系统来配置更复杂的需求。

`boi.PluginClass.loader`

boi.PluginClass.loader是编写boi loader 类型插件的构造函数。所谓loader类型插件，顾名思义，就是对构建功能进行更细致的配置，也就是对webpack进行配置。

下面是截取boi编译vue文件插件boi-plugin-loader-vue代码中的一部分：

const ClassLoader = boi.PluginClass.loader;

let config = {
  module: {
    preloader: null,
    postloader: null,
    loaders: [{
      test: /\.vue$/,
      loader: 'vue'
    }].concat(styleLoaders({
      extract: true
    }))
  },
  noParse: null,
  plugins: [stylePlugin],
  extra: {
    vue: {
      autoprefixer: isAutoprefixer,
      loaders: cssLoaders({
        extract: true
      })
    }
  },
  // 插件依赖的第三方module
  // 此配置项是为了解决低版本npm树形安装node_modules引起的module寻址问题
  // 如果你确定使用npm 3.0.0及以上版本，可以不配置此项
  dependencies: [
    'vue-loader',
    'vue-style-loader',
    'vue-html-loader',
    'extract-text-webpack-plugin'
  ]
};

// 每个插件中创建实例的数量不限,但是建议每个loader插件只创建一个实例
new ClassLoader('extend', config);

config对象是webpack的一系列配置项，其中module、noParse和plugins直接映射为webpack同名配置项；
extra与boi.spec的extras配置项功能相同，其内容被映射为webpack配置项；
dependencies比较特殊，是为了解决低版本npm（3.0.0以下）安装node_modules目录太深而导致的windows系统下模块寻址问题。如果你确定你的npm高于3.0.0版本，可以不配置此选项。

上述代码的最后一行创建了boi.PluginClass.loader的一个实例，第一个参数目前统一为extend，表明插件的工作类型；第二个参数为webpack的配置项。

发布你的插件，按照使用boi插件文档，在boi-conf.js中引入你的插件即可：

boi.use('boi-plugin-loader-vue', {
    style: {
        destDir: 'style',
        useHash: true
    },
    autoprefixer: false
});

编写可配置的插件

前文的boi.useAPI使用'boi-plugin-loader-vue'时传入了一系列配置项，这些配置项不是针对boi的，而是插件'boi-plugin-loader-vue'暴露出来的。

如果插件本身也是可配置的，那么在编写插件时，可以将插件编写为function类型，如下：

module.exports = function(options){};

上述代码中函数的参数options即可接受的配置项集合。

编写boi插件