大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件
webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化
首先我们得知道一个插件是如何组成的:
- 定义javascript命名函数
- 给这个函数的prototype添加apply方法
- 在这个方法内我们可以勾入webpack暴露的钩子,这些钩子主要由compiler,compilation两个对象暴露
- 在某个需要勾入的构建回调中加入自己的处理函数,处理需要处理的资源
- 处理完成后调用webpack提供的回调
上面提到的 compiler 和 compilation 是插件开发中用到的两个重要对象,我理解为compiler代表整个webpack的配置对象,在webpack启动时就建立,compilation代表单次构建的对象,每次文件的更改都会创建一个新的compilation对象,可能阐述的不是很完全,可以参照webpack官方文档
compiler 和 compilation 这两个对象都扩展自Tapable类,在触碰他们的钩子时根据钩子触发的时机调用不同的方法,主要有tap,tapAsync,tapPromise三个方法,调用形式都是
compilation.hooks.someHook.tap(/* ... */);
说了这么多,可以通过代码加深一下印象,来加深一下插件基本的组成和使用
// webpack插件先定义一个js函数
function MyPlugin(options) {
}
// 然后在这个函数的prototype添加apply方法
MyPlugin.prototype.apply = function (compiler) {
compiler.hooks.emit.tapAsync('MyPlugin',function(compilation, callback) {
// 在生成文件中,创建一个头部字符串:
var filelist = 'In this build:\n\n';
// 遍历所有编译过的资源文件,
// 对于每个文件名称,都添加一行内容。
// 在这里我们可以做一些我们想做的事情
for (var filename in compilation.assets) {
filelist += ('- '+ filename +'\n');
}
// 将这个列表作为一个新的文件资源,插入到 webpack 构建中:
compilation.assets['filelist.md'] = {
source: function() {
return filelist;
},
size: function() {
return filelist.length;
}
};
callback();
});
}
module.exports = MyPlugin
const path = require('path')
const MyPlugin = require('./js/plugins/myPlugin')
module.exports = {
entry: {
main: './js/main',
index:'./js/index'
},
output: {
filename:'[name]-[hash].js',
path:path.join(__dirname,'dist')
},
plugins:[
new MyPlugin() //此处调用插件
]
}
大家有么有在项目中有自己写过webpack插件,可以探讨一下
大前端工程化之写一个简单的webpack插件的更多相关文章
- 写一个简单的JQ插件(例子)
虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- Java写一个简单学生管理系统
其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...
- (2)自己写一个简单的servle容器
自己写一个简单的servlet,能够跑一个简单的servlet,说明一下逻辑. 首先是写一个简单的servlet,这就关联到javax.servlet和javax.servlet.http这两个包的类 ...
- django写一个简单的登陆注册
要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...
- laravel学习:php写一个简单的ioc服务管理容器
php写一个简单的ioc服务管理容器 原创: 陈晨 CoderStory 2018-01-14 最近学习laravel框架,了解到laravel核心是一个大容器,这个容器负责几乎所有服务组件的实例化以 ...
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
- 动手写一个简单版的谷歌TPU-指令集
系列目录 谷歌TPU概述和简化 基本单元-矩阵乘法阵列 基本单元-归一化和池化(待发布) TPU中的指令集 SimpleTPU实例: (计划中) 拓展 TPU的边界(规划中) 重新审视深度神经网络中的 ...
- 利用SpringBoot+Logback手写一个简单的链路追踪
目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简 ...
随机推荐
- JZOJ5405 & AtCoder Grand Contest 001 F. Permutation
题目大意 给出一个长度为\(n\)的排列\(P\)与一个正整数\(k\). 你需要进行如下操作任意次, 使得排列\(P\)的字典序尽量小. 对于两个满足\(|i-j|>=k\) 且\(|P_i- ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- CAP 6.0 版本发布通告 - 支持 OpenTelemetry
前言 今天,我们很高兴宣布 CAP 发布 6.0 版本正式版,在这个版本中,我们主要致力于对 OpenTelemetry 提供支持,以及更好的适配 .NET 6. 那么,接下来我们具体看一下吧. 总览 ...
- python (伪)私有属性和私有方法
1.定义方式 在定义属性或方法时,在属性名或者方法名前增加两个下划线,定义的就是私有属性或方法. 2.为什么要定义私有属性和私有方法 在实际开发中,对象的某些属性或方法只希望在对象的内部被使用,而不希 ...
- 微服务架构攀登之路(二)之RPC
1. RPC 简介 远程过程调用(Remote Procedure Call,RPC)是一个计算机通信协议 该协议允许运行于一台计算机的程序调用另一台计算机的子程序,而程序员无需额外地为这个交互作用编 ...
- axios导出 excel
this.axios({ methods: 'get', url: url, responseType: 'blob' }).then(res => { const blob = new Blo ...
- session反序列化
先来了解一下关于session的一些基础知识 什么是session?在计算机中,尤其是在网络应用中,称为"会话控制".Session 对象存储特定用户会话所需的属性及配置信息.这样 ...
- 数组内sizeof与strlen的区别
1.数组在内存中是连续存放的,地址呈4个字节递增 2.数组的定义需要初始化,否则输出会已随机值输出 3.strlen()和sizeof()之间无关联:strlen():是求字符串长度的----只能针对 ...
- 一网打尽JVM垃圾回收知识体系
垃圾回收的区域 堆:Java 中绝大多数的对象都存放在堆中,是垃圾回收的重点 方法区:此中的 GC 效率较低,不是重点 由于虚拟机栈的生命周期和线程一致,因此不需要 GC 对象判活 在垃圾收集器对堆进 ...
- 【记录一个问题】macos下使用opencl, clSetEventCallback不生效
一开始的调用顺序是这样: enqueueWriteBuffer enqueueNDRangeKernel enqueueReadBuffer SetEventCallback 执行后主程序用getch ...