一. plugin概述

1.1 Plugin的作用

plugin机制是webpack中另一个核心概念,它基于事件流框架tapable,你可以参考浏览器环境中的【DOM事件模型】【SPA模型中的生命周期钩子】或是node环境中的【EventEmitter模块】来理解其作用。plugin系统提供给开发者监听webpack生命周期并在特定事件触发时执行指定操作的能力。

当然,要写一个真正能实现一定功能的插件,你还需要了解CompilerCompilation这两个概念,网上可以找到非常多相关的文章(《webpack-docs/plugin》)。

1.2 Compiler

从表现上看,Compiler暴露了和webpack整个生命周期相关的钩子,通过如下的方式访问:

//基本写法
compiler.hooks.someHook.tap(...)
//如果希望在entry配置完毕后执行某个功能
compiler.hooks.entryOption.tap(...)
//如果希望在生成的资源输出到output指定目录之前执行某个功能
compiler.hooks.emit.tap(...)

webpack在重要的生命周期节点上都提供了事件钩子,我们可以借此加入一些自定义的功能。我们来编写一个插件,直观地看看webpack中涉及的钩子:

//check-compiler-hooks-plugin.js
const pluginName = 'checkCompilerHooksPlugin';
module.exports = class checkCompilerHooksPlugin {
apply(compiler){
//打印出entryOption执行完毕时Compiler暴露的钩子
for(var hook of Object.keys(compiler.hooks)){
console.log(hook);
}
}
}

可以看到Compiler上可以使用的钩子(当然这种方式看到的钩子和实际触发顺序无关):

注意上图中Compiler.hooks暴露的事件钩子中有一个compilation,下一小节将解释它。

1.3 Compilation

Compilation暴露了与模块依赖有关的粒度更小的事件钩子,官方文档中的说法是模块会经历加载(loaded),封存(sealed),优化(optimized),分块(chunked),哈希(hashed)和重新创建(restored)这几个典型步骤,从上面的示例可以看到,compilationCompiler生命周期中的一个步骤,使用compilation相关钩子的通用写法为:

compiler.hooks.compilation.tap('SomePlugin',function(compilation, callback){
compilation.hooks.someOtherHook.tap('SomeOtherPlugin',function(){
....
})
});

我们仿照上面的方法就可以查看到compilation对象上(compilation事件触发时,在回调函数中取得的引用)暴露的事件钩子。

CompilerCompilation暴露的事件钩子总数超过30个,具体信息可以直接在官方文档直接查询API,在特定的阶段钩入想要添加的自定义功能。想要更好地理解plugin的作用机制,还需要了解webpack的整个生命周期以及事件流框架tapable.

二. 如何写一个plugin

根据webpack官方文档的说明,一个自定义的plugin需要包含:

  • 一个javascript命名函数
  • 插件函数的prototype上要有一个apply方法
  • 指定一个绑定到webpack自身的事件钩子
  • 注册一个回调函数来处理webpack实例中的指定数据
  • 处理完成后调用webpack提供的回调

官网给出了一个基本的结构示例:

//console-log-on-build-webpack-plugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler){
compiler.hooks.run.tap(pluginName, compilation=>{
console.log('webpack构建过程开始');
});
}
}

将其添加到webpack插件中后可以看到运行中触发了传入的回调函数:

四. 实战

《webpack4.0各个击破(4)——javascript & splitChunks》一文中,我们使用splitChunks功能对初始模块进行代码分割,在为多页面应用模型的html入口插入script标签时遇到了无法自动插入的问题,那么本节我们用一个webpack-dispatch-chunk-plugin来解决一下这个问题。

处理的逻辑就是利用html-webpack-plugin暴露的更改资源标签的事件钩子htmlWebpackPluginAlterAssetTags来进行资源处理,此时资源已经离过模块化和代码分割并已经在名称中加入了hash标记,只需要此时过滤掉名称中含有vendors且不包含相应入口名称的新的chunk即可,当然这只是一个基本功能,想要动态实现功能,还需要将上例中checkMap部分变为对Compiler或是Compilation上对应属性的引用,本篇不再赘述。

【参考】

[1] webpack之内部运行机制》

作者:大史不说话

链接:Webpack4.0各个击破(7)plugin篇

来源:博客园

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Webpack4.0各个击破(7)plugin篇的更多相关文章

  1. webpack4.0各个击破(7)—— plugin篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  2. Webpack4.0各个击破(8)tapable篇

    目录 一. tapable概述 二. tapable-0.2源码解析 2.1 代码结构 2.2 事件监听方法 2.3 事件触发方法 三. tapable1.0概述 一. tapable概述 tapab ...

  3. webpack4.0各个击破(5)—— Module篇

    webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...

  4. Webpack4.0各个击破(10)integration篇

    一. Integration 下文摘自webpack中文网: 首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自 ...

  5. Webpack4.0各个击破(6)loader篇

    目录 一. loader综述 二. 如何写一个loader 三. loader的编译器本质 [参考] 一. loader综述 loader是webpack的核心概念之一,它的基本工作流是将一个文件以字 ...

  6. Webpack4.0各个击破(5)module篇

    一. 模块化乱炖 脚本合并是基于模块化规范的,javascript模块化是一个非常混乱的话题,各种[*MD]规范乱飞还要外加一堆[*.js]的规范实现.现代化前端项目多基于框架进行开发,较为流行的框架 ...

  7. Webpack4.0各个击破(1)html篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  8. webpack4.0各个击破(4)—— Javascript & splitChunk

    目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...

  9. webpack4.0各个击破(2)—— CSS篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

随机推荐

  1. JAVA基础之接口

    接口 学习完框架之后,整合SSM过程中对于接口的认识加深了许多.根据<java核心技术>这本书进一步研究了一下. 1.概念 java核心技术是这样说的:"在Java程序设计中,接 ...

  2. 个人总结的一些C++基础理论

    我自己整理的一些C++基础理论知识,面试的同学可以用到: 主要是针对那些基础理论知识比较薄弱的同学吧,希望会对大家面试有些帮助,排版什么的有点乱,大家多多包涵: 往期经典: 北漂95后的2020 给北 ...

  3. mysql基础之double,float长度标度定义

    MySQL类型float double decimal的区别 float数值类型用于表示单精度浮点数值,而double数值类型用于表示双精度浮点数值,float和double都是浮点型,而decima ...

  4. “开源、共享、创新” 2020 中国.NET开发者大会小结

    大会的新闻稿在2020年12月31日正式发布:开源·共享·创新|2020年中国.NET开发者大会圆满收官! , 本文是这篇新闻的补充性文章,仅代表个人对大会的各方面分享内容的一个小结. 在2019年上 ...

  5. Linux 内核参数 优化

    Linux 内核参数 优化 目录 Linux 内核参数 优化 1.编辑内核配置文件 2.参数及简单说明 3.客户端的典型状态转移参数 4.TCP重传参数 5.实现Nginx高并发的内核参数优化 生效配 ...

  6. 手写一个RPC框架

    一.前言 前段时间看到一篇不错的文章<看了这篇你就会手写RPC框架了>,于是便来了兴趣对着实现了一遍,后面觉得还有很多优化的地方便对其进行了改进. 主要改动点如下: 除了Java序列化协议 ...

  7. C/C++ 弱符号

    为什么会出现弱符号 在两个目标文件(a.o与b.o)链接的过程中,如果其中一个目标文件(a.o)通过extern的方式引用了另外一个目标文件(b.o)中的符号flag,但很不幸,在连接的过程中b.o没 ...

  8. 聊一聊这个总下载量36039K的XSS-NPM库,是如何工作的?

    上篇文章这一次,彻底理解XSS攻击讲解了XSS攻击的类型和预防方式,本篇文章我们来看这个36039K的XSS-NPM库(你没有看错就是3603W次, 36039K次,36,039,651次,数据来自h ...

  9. Prometheus集群介绍-1

    Prometheus监控介绍 公司做教育的,要迁移上云,所以需要我这边从零开始调研加后期维护Prometheus:近期看过二本方面的prometheus书籍,一本是深入浅出一般是实战方向的:官方文档主 ...

  10. 4.k8s存储之Volume、PV、PVC和StatefulSet

    3.Volume 容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题.首先,当容器崩溃时,kubelet 会重启它,但是容器中的文件将丢失--容器以干净的状态(镜像最初的 ...