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"//压缩文件的名称
      })
    ],
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容