webpack插件怎么手写
webpack插件没什么好说的,用过的都知道怎么配置,只是不知道内部怎么执行。今天学一学插件的一些机制,手写一个插件并不难。
之前介绍过了,webpack本质上是一种事件流机制,核心就是tapable,通过注册事件,触发回调,完成插件在不同生命周期的调用,内部也是通过大量的插件实现的。tapable内部暴露的方法挺多的,主要就是同步和异步,异步分为并行和串行。可以去GitHub上面看看:
https://github.com/webpack/tapable#tapable
这些方法都有用法示例,本来想写写使用方法,发现GitHub上面都有了,就不写了:
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
在写插件之前,不得不提一下compiler和compilation:
compiler对象代表了完整的 webpack 环境配置,可以访问整个环境。这个对象在启动 webpack 时被一次性建立,并配置好所有可操作的设置(options、loader、plugin等)。使用插件时将收到此 compiler 对象的引用。
compilation 对象代表了一次资源版本构建。在运行过程中,每当检测到一个文件变化,就会创建一个新的 compilation,从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation提供了很多关键时机的回调供插件做自定义处理时使用。
使用插件就是new一个,所以插件其实就是一个类(构造函数或者class类),内部在prototype定义一个apply方法(会直接调用),并提供compiler,通过compiler提供的hooks注册事件和在相应的回调里面进行操作。而compiler提供的compilation的重要属性是assets,表示所有的静态资源。
关于提供的hook和参数,可以在webpack>lib>Compiler.js搜hooks,其实compiler和compilation都是继承tapable。
关于hooks分别表示什么阶段可以去官网查看:https://www.webpackjs.com/api/compiler-hooks/
还需要明确一下,tapable里面提供的几个hook,同步的(sync开头)注册是tap,异步的(async开头)有tap、tapAsync、tapPromise,后面两个提供了回调函数。
引入自己的插件:
const MyPlugin = require('./plugins/my-plugin.js')
plugins里面使用:
new MyPlugin({
name: 'wade plugin'
})
my-plugin.js里面:
class MyPlugin {
constructor(options) {
this.options = options;
}
apply(compiler){
compiler.hooks.done.tap('MyPlugin', (stats) => {
console.log('MyPlugin ', this.options);
});
}
}
module.exports = MyPlugin;
apply提供了compiler,done是编译完成,同步的调用tap,第一个参数没什么意义,一般写自己插件名字,stats里面对象就多了,有 options、 outputOptions等,可以自己命令行那边看看。
异步的:
class MyPlugin {
constructor(options) {
this.options = options;
}
apply(compiler){
compiler.hooks.done.tapAsync('DonePlugin', (stats, callback) => {
console.log('Hello ', this.options.name);
setTimeout(() => {console.log(1);}, 1000);
setTimeout(() => {console.log(2);}, 2000);
setTimeout(() => {console.log(3);}, 3000);
setTimeout(() => {
callback();
}, 4000)
});
}
}
module.exports = MyPlugin;
可以看看控制台,看看效果。
一般自己写插件会在emit和afterEmit进行一些操作,这两个钩子的参数是compilation,里面有assets是静态资源,可以进行操作:
compiler.hooks.emit.tap('DonePlugin', (compilation) => {
let assets = compilation.assets;
console.log(assets);
});
比如我想给bundle.js添加一个字符串:
let content = assets['bundle.js'].source();
assets['bundle.js'] = {
source(){
return '"build by wade"rn' + content
},
size(){
return content.length;
}
}
打包结果:
比如创建一个文件:
let creatContent = '创建一个文件';
assets['creat.js'] = {
source(){
return creatContent
},
size(){
return creatContent.length
}
}
上面都是没什么意义的操作,只是想表达插件的一些方法,比如可以在文件生成之后进行压缩,或者自动化部署到服务器之类的插件。真正写一些有用的插件还是需要根据具体清空具体实现代码,可能还需要引入一些外部的插件,比如进行请求需要引入ajax或者axios,压缩要引入JSZip等。
(完)
- 史上最全webview详解
- SpringBoot快速入门
- 效果类似于label从下往上滑(采用uiTableView实现)
- android 热修补之andfix实践
- ios 设置label的高度随着内容的变化而变化
- Android字体大小怎么自适应不同分辨率?
- iOS textfield实现一行的数字限制,超出进行弹框
- android https安全连接
- 第二章 正则表达式位置匹配攻略
- 从网络上下载省份城市名称并存入文件然后进行读取省份城市
- android 应用模式之mvp
- Android网络请求框架之Retrofit实践
- iOS 跳转到应用所在的App Store市场
- 第一章 正则表达式字符匹配攻略
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微服务下数据一致性的几种实现方式
- 关于mac electron设备权限申请的方法
- 两种实现方式 | 如何查看消费者组的消费情况
- 一致性hash算法(golang)
- 微服务安全吗?
- 掌握Rabbitmq几个重要概念,从一条消息说起
- 超赞!墙裂推荐一个 MySQL 自动化运维工具!
- 设计模式-责任链模式
- 问题 linux下执行.sh 文件出现 no such file or directoryile
- 问题:ssm关于mybatis没有找到配置问题(not found)
- 设计模式-享元模式
- 设计模式-代理模式
- win10 x64下从0开始搭建YApi可视化接口管理平台
- dubbo(一)SPI机制与实现路径
- Go 使用三方 Redis 包操作 Redis