以webpack为例来看微内核架构
以webpack为例来看微内核架构
微内核系统一般分为两个部分——核心系统和插件系统,这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块,它提供的是通用逻辑(比如Tapable),而插件系统这是些具体的逻辑(比如HtmlWebpackPlugin插件)。 比如系统怎么跑起来,插件之间怎么通信等模块都属于核心系统里面,让系统更加丰富多彩就是插件系统了。 插件之间可以相互独立,也可以有依赖,比如webpack的ModernModelPlugin插件就依赖HtmlWebpackPlugin插件。
核心系统怎么知道哪些插件可用呢?
这就需要注册表了,其实我们的webpack.config.js
就起到了这样的作用,它告诉我们需要使用哪些插件。
插件系统和核心系统怎么通信呢?
这就需要用到Tapable了,里面有各种hooks,并且在运行各个生命周期过程中会执行对应的回调了。我们的核心系统有生命周期的概念,插件里面也有,因为它们的架构是类似的。 我们的核心系统在运行后会先读取注册表信息,这个过程其实就是订阅事件,注册回调的过程。插件可以在运行回调的过程中再不断订阅自己需要的其它事件,注册其它回调。ModernModelPlugin插件就订阅HtmlWebpackPlugin插件的某些事件,注册自己的回调的。 服务于具体逻辑的插件模块是独立于核心系统之外的,但是他可能会需要操作核心模块的系统服务来实现这些定制化功能,此时核心系统需要提供一个上下文对象(Context),当然,插件模块与外部进行交互只允许通过此上下文对象完成。上下文对象提供了基础操作(调起其他插件模块、调起系统服务、获取系统信息)的API和事件。 这样待核心系统的生命周期顺序执行的过程,也就伴随这对应时期的插件的生命周期交替执行,生命周期走完了,整个程序流程也就结束了。
- 分类:
- Web前端
相关文章
从vuecli3学习webpack记录(三)基类Tapable和Hook分析
在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',( 阅读更多…
怎么调试Webpack+React项目,报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办
今天在WebStorm上Windows上准备调试一个React项目,就出现了这样的报错。 Node Parameters里面写的是webpack-dev-server的执行文件 .\node_mod 阅读更多…
用webpack的require.context() 简化你的代码
随着我们的项目越来越大,平时的常见用操作就会觉得很‘麻烦’了,比如每次要添加新的路由, vuex里面添加新的module等 { name: 'moduleN', 阅读更多…
webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks
最近在这段时间刚好在温故下webpack源码,webpack5都出来了,4还不再学习下? 这次顺便学习下webpack的常用插件html-webpack-plugin。 发现这个插件里面还额外加入了 阅读更多…
webpack笔记——hook执行时call的是什么
我们一般使用的插件都是Hook子类,比如SyncHook,没有复杂的重写基类Hook的compile方法 先看Hook基类 // node_module/tapable/Hook.js cla 阅读更多…
从vuecli3学习webpack记录(零)整体流程
今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手 阅读更多…