开发webpack插件

webpack

前言

webpack作为前端开发利器，提供Plugin，Loader扩展机制。开发者可以充分利用Webpack插件机制，扩展需要的功能。Loader功能简单，实现容易，不做说明。

插件之“形”

插件的结构固定，代码如下：

class CompressionPlugin {
  constructor(options) {
    this.options = _.assign({}, defaultOption, options);
  }
  apply(compiler) {
    compiler.plugin('compilation', (compilation) => {
      // Just boilerplate code
      compilation.plugin('module-asset', (module, file) => {
        noop(file);
      });
    });
    compiler.plugin('emit', (compilation, callback) => {
      const assets = compilation.assets;
    }
  }
}

开发插件包含以下几步：

1. 函数声明(ES6 class)
2. 原型apply函数
3. 挂载webpack lifecycle hook
4. 操作webpack compiler, compilation对象
5. 执行回调，任务结束

插件之“神”

插件的核心简而概之：正确的时间做正确的事。

webpack hook数量繁多，参考官方文档。第三方插件功能多集中在文件处理，典型案例html-webpack-plugin，笔者也将实现简单插件，实现自动清理非本次编译生成文件。

class CleanupPlugin {
  constructor(options) {
    this.options = _.assign({}, defaultCleanupOptions, options);
    this.rules = this.options.exclude;
    const status = validateExcludeRules(this.rules);
    if (!status) {
      throw new Error('CleanupPlugin exclude array must consist of string or RegExp');
    }
    this.exclusion = matchExcludeRules(this.rules);
  }
  apply(compiler) {
    compiler.plugin('after-emit', (compilation, callback) => {
      const assets = Reflect.ownKeys(compilation.assets);
      const files = recursiveReadDir(compiler.options.output.path);
      const extraneous = files.filter((filename) => !assets.includes(filename)).filter((filename) => !this.exclusion(filename));
      extraneous.forEach((filename) => {
        fs.unlinkSync(path.resolve(compiler.options.output.path, filename));
        if (!this.options.quite) {
          // eslint-disable-next-line no-console
          console.log(`${filename} already deleted`);
        }
      });
      callback();
    });
  }
}

compilation.assets表示webpack compilation生成文件，读取输出目录文件，交叉比对，就能得到冗余文件并清理。完整代码见https://github.com/bornkiller/webpack-plugin-strawberry。

插件样例

笔者学习开发插件的过程，翻阅部分插件，挂载lifecycle hook如下：

• optimize-chunk-asset - prepack-webpack-plugin
• emit - webpack-manifest-plugin
• done - webpack-cleanup-plugin

插件模式

webpack hook挂载执行方式不同，存在以下几种：

• applyPlugins - 同步并行
• applyPluginsBailResult - 同步串行，当handler非空返回值，调用终止，并返回结果
• applyPluginsWaterfall - 同步串行，前置handler返回值作为后置handler输入参数
• applyPluginsAsync === applyPluginsAsyncSeries - 异步串行
• applyPluginsAsyncSeriesBailResult - 异步串行，当handler callback包含响应值，则执行回调，调用终止
• applyPluginsAsyncWaterfall - 异步串行，前置handler callback响应值作为后置handler输入参数

Contact

Email: hjj491229492@hotmail.com