webpack插件:压缩打包文件

vue打包文件出来的是一个文件夹，发送给其他人的时候需要一个zip压缩包。这时候就需要使用到插件。当然也可以使用现成的插件对压缩包进行压缩。为了对webpack插件的进一步的了解,自己编写一个插件来完成对打包文件的压缩

webpack 前提知识点

• 什么是webpack
  webpack通过Loader完成模块的转换工作，Plugin机制则让其更加灵活，可以在webpack生命周期调用钩子函数完成各种任务，包括修改输出资源，输出目录等等
• 基本构建流程
  在编写插件之前，还需要了解下webpack的构建流程。webpack的构建流程如下几步
• 校验文件的配置
• 生成compiler对象
• 初始化默认插件
• run阶段：如果运行watch模块，则执行watch方法，否则不执行run方法
• compilation 创建Compilation对象，回调compilation相关的钩子
• emit阶段：文件内容准备完成，准备生成文件，这是最后一次修改机会
• afterEmit阶段 文件已经写入磁盘完成
• done：完成编译阶段
• 常见钩子
  afterPlugins :启动一次新的编译
  compile：创建compilation对象之前
  compilation：创建compilation之后
  emit:资源生产完成,输出之前
  afterEmit:资源输出到目录完成
  done:完成编译
• Tapable
  tapable是webpack的核心工具，他包括三种钩子
  tap：同步钩子
  tapAsync:异步钩子
  tapPromise:异步钩子
• plugin格式
  plugin其实就是一个类，类中必须包含一个apply函数，apply函数有一个Compile对象

手动编写一个压缩打包文件的插件

• 创建一个类，让其拥有apply方法。因为是要求在打包完成之后压缩文件，所以选择webpack的afterEmit异步钩子。具体代码如下所示

const fs = require('fs')
const compressing = require('compressing');
class Zip {
    constructor(option){
        this.option = option
    }
    apply(compiler){
      compiler.hooks.afterEmit.tapAsync("Zip",(_,cb)=>{
       let exist =  fs.existsSync(this.option.filePath)
        if(exist){
            if(!fs.existsSync(this.option.zipPath)){
                //zip压缩保存的目录不存在了,先创建
                fs.mkdirSync(this.option.zipPath)
            }
            let fileName ="target.zip"
            if (this.option.zipName){
                fileName = `/${this.option.zipName}.zip`
            } 
            let zipPath = this.option.zipPath +fileName
            if (fs.existsSync(zipPath)) {
                // 压缩包存在，先删除压缩包
                fs.unlinkSync(zipPath)
            }
            compressing.zip.compressDir(this.option.filePath,zipPath)
            .then(()=>{
                cb()
            }).catch(err=>{
                cb()
            })
           
        }else{
            cb()
        }
      })
    }
}
exports = module.exports = Zip

• 使用如下

    plugins:[
      new zipPlugin({
        filePath:path.resolve(__dirname,"build"), //代表打包文件的目录
        zipPath:path.resolve(__dirname,"target"),//代表要保存到那个目录下
        zipName:"view"//压缩文件的名称
      })
    ],