一、项目简介：

开发一款能够紧缩构建资源为zip包的webpack插件。

完毕功用点

  • 主动紧缩构建资源，生成后缀为.zip的紧缩包
  • 紧缩包命名经过插件传参设定

二、项目布景：

为什么开发打包紧缩zip的webpack插件？appearance

开发w数组公式ebpack插件，能够node.js设备让咱们从webpack装备工程师，深化了解webpack作源码之家业机制及原理，然后走向webpacknode.js是干什么的开发工程师。那挑选开发紧缩打包zip的webpac数组指针k，是由webpack优化于项目安置常常需求将编译构建的项目打包成zAPPip包。因此挑选最常用简略的功用，开发webpack插件。

三、实践进Node.js程：

3.1 首要恶补下wewebpack打包原理bpack插件的根数组初始化底常识

webpac数组去重的5种办法k插件源码之家是伴随 we数组去重bpack 构建的初始化到最后源码超市文webpack面试题件生成的整个作业进程，插件的意图是在于解决loadeapp装置下载r无法完毕的其他作业。
在 Webpack 整个作业进程会有许多环节，为了便于插件的扩展，Weappleidbpack 几乎在每一个环节都埋下了一个钩子。这样咱们在开发插件的时分，经过往这些webpack装备不同节点上挂载不同的使命，就源码交易网站源码能够轻松扩展 Webpack 的才干。
【造轮子篇】开发紧缩资源为zip包的webpack插件｜项目复盘

3.1.1 插件webpack热node.js装置教程更新的原理的作业环境

插件webpack打包原理源码站只能作业在webpack环境中。简略来讲，要开发调试webpack插件前就需求创造webpack作业数组初始化环境源码之家，创建装备文webpack是什么东西件webpac数组去重k.config.js，并设备webpack、webpacknode.js是干什么的-cli依托。将数组和链表的区别开发好的插件放到装备文源码本钱件的plugins数组中，跟随webpackappearance进行编译实施。

3.1.2 插件的根柢结数组初始化构

// 1. 插件称谓
class Plugin{
// 接受插Node.js件传递的参数
constrnode.js装置教程uctor(options){
}
// 2.源码年代 插件上供给apply办法，webpack供给compiler政策
applywebpack中文网(node.js设备教程compiler){
// 3. 指源码怎样做成app软件定一个挂载到 webpanode.js装置教程ck 自身的作业钩子
// compiler供给hooks钩子办法，作用于构建流程中
c源码怎样做apple成app软件ompiler.APPhooks.done.tap('Plugin',// 4. 处理 webpack 内部实例的特定数据
// 5. 功appointment用完毕后调用 webpa数组初始化ck 供给的回调
()=>{
})
}
}
module.exports = Plugin

3.1.3 插件的作业处理

1）插件中怎样获取传递的参数Node.js？

经过插件的结构函数进行获取。

classwebpack阮一峰 Plugin数组c言语{
// 接受插APP件传递的参数approach
constructor(options){
thnode.js 教程is.optioWebpacknsnode.js是干什么的 = options
}
}

2）插件中的差错处理

  • 参webpack装备源码交易网站源码数校验阶段能够直接throw的办法将差错抛出 
    throw new Error('enode.js面试题rror options')
  • 假定现已进入到hwebpack中文网oappleidoks钩子阶段，数组初始化能够源码怎样做成app软件经过compilation政策的warnings和errors接纳 
    compilation.warninapproachgs.push('wa源码rnin数组c言语gs')Node.js
compilationAPP.errors.push('error')

3）对资源文node.js设备教程件数组词处理：经过Compilation进行源码之家文件写入

关于一些插件，自身需求产生一些静态资源。比如生成zip包，之前源码阅览时分有了解到，文件生成阶段 是在emit阶段，则咱们能够监听compiler的emit钩weapplicationbpack和gulp的差异子阶段，获取到compilation政策，并将毕竟的内源码编辑器容 设置到compilation.aswebpack优化sets政策上输出到磁盘目录。
其他，文件的写入，一般需求仰仗数组的界说 wenode.js下载bpack-sources。

3.2 初步敲代码，开发紧缩资源为zip包插件

3源码年代.2.1 预备常识：数组词Noappearnode.js下载de源码编辑器.js里面怎样将文件紧缩成zip包？

咱们能够运用源码站 jszip源码超市 进行紧缩生成zip包。

3.2.2 初始化插件文件

新建 zipPlugin.js 文件，并参看数组排序源码分享网官webpack面试题方文档中插件的根柢结构，初始化插件代码：

class ZipPugin{
// 接受插件传递的参数
const数组排序applicationrNode.jsuctappleor(options){
this.options = options
}
// 插件上供给applappleidy办法，webpack供给compiler政策
appnode.js是什么ly(cnode.japp装置下载s设备进程omWebpackpiler){
}
}
module.webpack优化exports = ZipPugi源码编辑器编程猫下载n

3.2.3 挑选源码生意网站源码插件触发机会

挑选插件触发机会，其实是挑选插件Webpack触发的 compiler 钩子（即何时触发插件）。
Webpack 供给钩子有许源码多，这儿简略介绍几个，无缺详细可参看官方文档“Compiler Hooks”：

  • entryOption : 在 webpack 选项中的 entr数组词y 装备项 处理过之后，实施插件。
  • afterPlugins : 设置完webpack和gulp的区别appear初始插件之后，实施插件。
  • compilation : 编译创建之后，生成文件之前app装置下载，appear实施插件。webpack中文网
  • emit : 生成资源码源node.js设备教程到 outpappleidut 目录之前。
  • done :源码 编译完毕。

咱们紧缩资源为zip包的插件需求在资源生成之前处理，所以挑选了 emit 钩子。

3.2.4 挑选触发钩子的办法

在 compiler.h源码怎样做成app软件oonode.js是什么ks下指定作业钩子数组公式函数，便会触发钩子数组指针时，实施回调函数。源码生意网站源码
Webpack 供给三种触发钩子的办法：

  • tap ：以同步方appointment法触发钩子；
  • tapAsync ：以异步办法触发钩子；
  • tapPromi数组公式se ：以异数组指针步办法触a源码本钱pple发钩子，回来 Promise；

因为上面挑选了 emit 钩子APP是异步的，因此挑选tapAsnode.js装置步骤ync 办法触发钩子。

3.2.5 编写插件逻辑

完毕插件功用的逻辑代码数组排序：

// zipPlugin.js
const JSZip = require('jsziawebpack优化ppreciatep');
const path = requiwebpack是什么东西re('path');
const RawSource = require('wnode.js是干什么的ebpack-souappearancerces').RawappointmentSource;
const zip = new JSZip();
module.exports = clas数组词s ZipPluwebpack打包原理gin {
conode.js装置nstructor(options) {
this.oapproachptions = options;
}
appl数组排序y(Node.jscompiler) {
com数组排序piler.hooks.emit.tapAsync('ZipPlugin', (compilation, callback) =node.js装置步骤> {
// 创建目录称谓
const folder = zip.fold源码生意网站源码er(twebpack面试题hisappleid.options.fil源码站ename);
/appstore/ 遍历compilation.ass数组初始化ets政策
for (let filename in compilanode.js下载tapp设备下载ion.assetnode.js的特征s) {
// 获取source
const source = compilati数组和链表的差异on.assets[filename].source();
// 将source添加到folder中
foldnode.js装置er.file(filename, source);
}
// 将内容生成zip
zappearip.generatew数组去重的5种办法ebpack最新版别Async({
type数组c言语: 'nodebuffer'
}).then(webpack打包原理(content)webpack优化 => {
// 获取output（绝对路径）
const outpuwebpack打包原理tPath = path.jwebpack装备oin(
compilation.options.output.path,
this.options.filename + '.zip'
);
const outputRelativePath = path.rappleelative(appointment
c源码站ompilation.options.output.path,
outputPath
);
// 将内容挂载到compilation.assets上，并将buffer转源码交易网站源码换为source
compilation.anode.js是干什么的源码站sset源码之家s[outputRelanode.js装置tivwebpacwebpack最新版本k优化ePath] = new RawSour数组排序ce(content);
callback();
});
});
}
}

运用插件的办法：

// webpack.config.js
const path = r源码编辑器编程猫下载equire(node.js是干什么的'path');
const Zinode.js 教程pPlugin = require('数组c言语./pluginode.js是什么ns/zipPlugin');
mo数组dule.exports = {
entry: './src/main.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'm数组指针ain.js'
},
mode: 'production',
plugins: [
nnode.源码编辑器编程猫下载js 教程ew ZipPlugin({
fnode.js设备ilenamenodeappstore.js是干什么的: 'of源码之家fline'
})
]
}

四、总结考虑：

咱们经过一个简略插件的开发进程，了解了webpack插件机制的作业原理，总结下来就是一句话：Webpack 为每一个作业环节都预approach留了适宜的钩子，我node.js下载们在扩展数组初始化时只需求找到webpack面试题适宜的机会去做适宜的作业就能够了。

本文正在参与「 2021 春数组词招闯关活动」, 点击查看 活动概况