webpack-plugin-md


title: webpack plugins Hooks 介绍
img: //bloglibs.oss-cn-beijing.aliyuncs.com/techlogo/nodejs-logo.png
date: 2018-07-16 23:25:54
tags:

  • webpack
  • hooks
  • compiler
    category:
  • – 技术

webpack 使用有一段时间了, 有时候为了工程化比较完善,不得不自己开发添加一些hooks完善脚手架,

使用

 pluginsConfig.push(new FinishShell({
        onBuildEnd: ['zip -r sdk_'+appVersions+'.zip ./'+publishDirName] 
    }))

plugins

'use strict';
var exec = require('child_process').exec;

function puts(error, stdout, stderr) {
    console.log(stdout);
}

function WebpackShellPlugin(options) {
  var defaultOptions = {
    onBuildStart: [],
    onBuildEnd: []
  };

  this.options = Object.assign(defaultOptions, options);
}

WebpackShellPlugin.prototype.apply = function(compiler) {
  const options = this.options;

  compiler.plugin("compilation", compilation => {
    if(options.onBuildStart.length){
        console.log("Executing pre-build scripts");
        options.onBuildStart.forEach(script => exec(script, puts));
    }
  });

  compiler.plugin('done', function(){
    if(options.onBuildEnd.length){
        console.log("Executing post-build scripts");
        options.onBuildEnd.forEach(script => exec(script, puts));
    }
  })
};

module.exports = WebpackShellPlugin;

重要的声明周期

  • -> 传入options并校验
  • -> 创建全局唯一生命流程compiler对象
  • -> 调用options.plugins数组插件函数
  • -> 执行compiler.run真正跑程序
  • -> new 构建的Compilation
  • -> 通知addEntry钩子加载entry的资源
  • -> compilation进行buildModule
  • -> compilation进行shouldGenerateChunkAssets
  • -> compilation.emit完成
文章来源: webpack-plugin-md