前言
一起深入Wepcak , 尽管 Vite 非常火爆确实很香
,但是 Webpack 依然在企业占据主导地位以后我也不知道
, 学习深入非常有必要,主要介绍loader / plugin 和原理分析,而那些配置只介绍部分常用的,我希望您能学会看文档,中文 or 英文我看不懂,以后必学
所以
一位程序员的职业生涯大约十年,只有人寿命的十分之一。前端项目只是你生活工作的一部分,而你却是它的全部,你是他的灵魂。请放下长时间的游戏、工作时的摸鱼。多学习来以最完美的状态好好陪你项目!
正文
文章底部小彩蛋,请你一步一步看过去!!
知识点
- Webpack 前置基础
- Loader 机制(手写一个)
- Plugin 机制
- 小彩蛋(介绍部分Webpack原理分析)
Webpack 前置基础(配置)
上面内容高级 CV 操作来自Webpack官网仅贴出常用配置!这个不是主体,进入写一个环节
- entry:入口,Webpack 执行构建的第一步将从 entry 开始,可抽象成输入。
- module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 entry 开始递归找出所有依赖的模块。
- chunk:代码块,一个 chunk 由多个模块组合而成,用于代码合并与分割。
- loader:模块转换器,用于把模块原内容按照需求转换成新内容。
- plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。
你得了解上面基本信息后,才可以进入下一步
Loader 机制(手写一个)
简单来说 loader 是一个 可以获取你入口文件源代码的一个函数,函数本身参数就是源代码。
实现一个读取图片的 loader 并没有你想象的那么难
- 获取图片的buffer
- 转base64 / 写入 buffer 生成图片
动手试试
获取模块配置项
在 Loader 中获取用户传入的 options,通过 loader-utils 的 getOptions 方法获取:
上面通过 this.emitFile 进行文件写入
同步与异步
Loader 有同步和异步之分,上面的 Loader 都是同步的 Loader,因为它们的转换流程都是同步的,转换完成后再返回结果。但有些场景下转换的步骤只能是异步完成的,例如你需要通过网络请求才能得出结果,如果采用同步的方式 网络请求 就会阻塞整个构建,导致构建非常缓慢。
缓存加速
在有些情况下,有些转换操作需要大量计算非常耗时,如果每次构建都重新执行重复的转换操作,构建将会变得非常缓慢。为此,Webpack 会默认缓存所有 Loader 的处理结果,也就是说在需要被处理的文件或者其他依赖的文件没有发生变化时,是不会重新调用对应的 Loader 去执行转换操作的。
如果你想让 Webpack 不缓存该 Loader 的处理结果,可以这样:
知道了 Webpack 核心loader 再来介绍一下 plugin
Plugin 机制
Plugin 可以干的活比Loader更多,更复杂,其本质是一个Class类
插件的基本结构 plugins 是可以用自身原型方法 apply 来实例化的对象。apply 只在安装插件被 Webpack 的 compiler 执行一次。apply 方法传入一个 webpck compiler 的引用,来访问编译器回调。
使用插件时,只需要将它的实例放到 Webpack 的 Plugins 数组配置中:
先来分析以下 Webpack Plugin 的工作原理:
- 读取配置的过程中会先执行 new HelloPlugin(options) 初始化一个 HelloPlugin 获得其实例
- 初始化 compiler 对象后调用 HelloPlugin.apply(compiler) 给插件实例传入 compiler 对象
- 插件实例在获取到 compiler 对象后,就可以通过 compiler.plugin(事件名称, 回调函数) 监听到 Webpack 广播出来的事件,并且可以通过 compiler 对象去操作 Webpack
在apply
的阶段你可以调用 compiler钩子
webpack的hoosk钩子其实是使用tapable直接注册在不同的阶段的,所以我们进行下一步分析
小彩蛋(介绍部分Webpack原理分析)
Webpack 本质是一个打包构建工具,我们不妨思考一下,它为我们做了什么。
- 读取
webpack.config.js
配置文件,找到入口 - 获取入口文件中的源代码 分析抽象语法树(babel实现)
- 分析过程 静态分析代码执行上下文和使用情况, 标记是否
Tree Shaking
- 核心的loader 和 plugin 在读取配置过程中执行函数,
tapable
注入钩子函数 - 最后输出在配置文件中的出口目录中
其实我们简易分析一下,也是非常好理解的
使用 @babel/parser
和@babel/traverse
两个库分析源代码抽象语法树,找出所用模板依赖
而tapable
本质是一个javascript小型库, 内部是发布订阅模式。类似Node的EventEmitter。
Webpack 本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是 Tapable,Webpack 中最核心的负责编译的 Compiler 和负责创建 bundles 的 Compilation 都是 Tapable 的子类,并且实例内部的生命周期也是通过 Tapable 库提供的钩子类实现的。
总结
Webpack 本质是一个事件流机制的打包构建工具,从读取配置到分析语法树注册事件流输出文件的一个过程。其核心的loader
本质也是一个可以获取到源代码的一个函数,plugin
则是一个可以获取到整个事件生命周期的一个类~ 至此你应该对webpack有了更加深刻的认识,本文跳过了许多的细节问题,介绍核心知识,所以你还是得多看看配置的文档!
往期文章
【重拾落叶】Javascript执行期上下文、预编译
【重拾落叶】浏览器如何完整获取一个页面?(加载篇)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!