前端研发

webpack@4.46.0源码分析

代码在线跑，知识轻松学

Python精品学习库

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

博客搬家 | 分享价值百万资源包

往期视频·干货材料·成员作品 最新动态

技术创作特训营·精选知识专栏

新邀入驻腾讯云开发者社区，福利多多！

如何运用「云、端融合的数智化安全体系」高效护航数据安全

左手AI，右手安全 —— 一汽丰田数字化转型之路

当然要配vue-loader啊，.vue文件解析全靠他了。vue-loader的整体流程的分析可以参考我之前的文章：「.vue文件的编译」1. vue-loader@15.8.3 的整体流程

3. 「uniapp 如何支持微信小程序环境开发」配置项简化到可以让你一盔全貌之：loader + plugin

我们当前项目中使用unaipp进行微信小程序的开发，版本是2.0.1-32920211122003。好奇uniapp是如何做到这层转换的。因此从uniapp中抠出了核心逻辑（做了很多简化工作，为了你能更好的理解啊），并写了一个简易demo，来一探究竟。

1. 「uniapp 如何支持微信小程序环境开发」初探uniapp为此做了哪些努力？

这里也做了一点变更，uniapp的实现中是如下形式，main.js和页面.vue会命中同一个loader（见node_modules/@dcloudio/webpack-uni-mp-loader/lib/main-new.js），然后在这个loader里面根据是是否有resouceQuery来区别处理（显然main.js没有，而页面.vue有。

2. 「uniapp 如何支持微信小程序环境开发」配置项简化到可以让你一盔全貌之 entry

如果这个节点是一个普通元素，则遍历它的所有 children，递归执行 markStatic。因为所有的 elseif 和 else 节点都不在 children 中， 如果节点的 ifConditions 不为空，则遍历 ifConditions 拿到所有条件中的 block，也就是它们对应的 AST 节点，递归执行 markStatic。在这些递归过程中，一旦子节点有不是 static 的情况，则它的父节点的 static 均变成 false。 

「.vue文件的编译」4. 模板编译之AST的优化

with中的this是vue实例,_u等等都是挂载在该Vue原型上的，_c是直接挂载vm实例上的。

「.vue文件的编译」5. 模板编译之基于AST的代码生成

下面parseHTML方法是用来遍历html字符串的并解析出标签(当然包含标签中的属性)、文本等信息，详细分析参考这里。

「.vue文件的编译」3. 模板编译之AST生成

要想将html转成AST，首先是要正确的解析(遍历)出html的结构，simple-html-parser.js就是做这个事情的（vue@2.6.11就是用的这个库）。在这个解析的过程中会调用一些回调如start、end、chars等，在这些回调中会完成html的AST的构造。

「.vue文件的编译」2. 模板编译之 simple-html-parser.js

通常我们会使用vue-cli来创建一个vue项目，由于vue-cli对常见的开发需求进行了预先配置，做到了开箱即用。但是阻碍碍我们窥探其真面目脚步。当然官方也提供了手动配置的方案。参考

2. 「uniapp 源码分析」vue-loader@15.8.3 的整体流程

 如果项目复杂，并且很多功能相对独立，那么不同的功能可以交给不同的团队开发，团队本身存在差异如技术选型等。另外的好处是，功能解耦，各功能可以独立开发、测试、部署。

「小程序微前端」 初探

new Vue(..)之后总共有两个大的步骤，第一步是调用vm._init完成组件的各种准备（初始化）工作，然后是开始结合数据与模板实现页面的渲染。vue引入了虚拟DOM技术，这里页面渲染分为两步，将模板和数据（转为了render函数）转为虚拟DOM树，而后再将虚拟DOM树同步到界面上。上一小节已经分析过创建虚拟DOM树的过程，现在我们来看看虚拟DOM是如何同步到界面上的。

6. 「vue@2.6.11 源码分析」组件渲染之虚拟DOM上界面

将组件渲染渲染分为两大步骤：组件信息（事件、方法等等）的初始化，以及组件的渲染。 虽然源码中 $mount方法调用放在了_init方法上，但是感觉拿出来好些，毕竟是两个大的步骤。

4.  「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作

vue@2.x中用到了虚拟DOM技术，基于第三方虚拟DOM库sanbbdom修改。建议阅读本文之前对snabbdom的使用和原理 有一定的了解，可以参考 snabbdom@3.5.1 源码分析。

5. 「vue@2.6.11 源码分析」组件渲染之创建虚拟DOM

queue的初始化及其含义参考上面的变量解释的表格，当前demo只有一个入口即a.js，因此此时queue只有一个元素，module就是'a.js'（entryModule），action是ENTER_MODULE，由于entryModule和其所在的Chunk已经建立过关系，因此跳过ADD_AND_ENTER_MODULE节点，直接来到ENTER_MODULE

8-1. 「webpack源码分析」一个具体案例再次深入看buildChunkGraph的运行过程

之所以选择v2.6.11是因为当前项目（腾讯云医）使用uniapp框架（v2.0.1-32920211122003）进行微信小程序开发，uniapp框架提供的vue运行时就是基于v2.6.11进行改造的。 

1. 「vue@2.6.11 源码分析」介绍和准备

vue 最核心的卖点是数据驱动和组件。浏览器原生提供的交互是通过dom api来修改dom元素，由于浏览器兼容性问题后面的框架如jquery对原生的api进行了一层的封装以屏蔽浏览器的差异性，但并未作出实质的改变。想想这个过程，通常是数据发生变化，js根据变化的情况进行判断而后操作dom。dom变动的本质实际根本上实际是由数据驱动，我在第一家公司数字政通(egova)首次接触了的此类框架knockout。

2. 「vue@2.6.11 源码分析」数据驱动视图（响应式）

另外一个虚拟DOM库：virtual-dom 解释了为什么(Motivation)会出现虚拟DOM？

1. 「snabbdom@3.5.1 源码分析」snabbdom 介绍和使用

h函数(创建虚拟DOM)
h可以理解为createVirtualDom即创建虚拟节点。
export function h(sel, b, c) {
    //... 由于h函数有多重重载形式，这部分是处理参数
    
    if (children !== undefined) {
        for (i = 0; i < children.length; ++i) {
            // 如果孩子是原始类型，直接创建vnode
            if (is.primitiv

2. 「snabbdom@3.5.1 源码分析」h函数 和 虚拟DOM

看到会返回一个patch函数。看到init内部有很多函数，这些函数大都都是用到api进行DOM操作，而api依赖入参domApi（如果放在外侧，domApi需要作为参数传递）。 这里实际上通过闭包私有化这些函数作为方法存在。

3. 「snabbdom@3.5.1 源码分析」patch(如何打补丁？)

snabbdom这种实现解构了基础和上层模块能力，上层模块可以按照职责单一原则进行拆分，然后进行注册，通过钩子参与构建过程（怎么感觉和webpack基于tapable类似，是吧）

4.  「snabbdom@3.5.1 源码分析」内置模块

thunk 函数传入 一个选择器，一个 key 作为 thunk 的身份标识，一个返回 vnode 的函数，和一个 state 数组参数。如果调用，那么 render 函数将会接收 state 作为参数传入。

5. 「snabbdom@3.5.1 源码分析」Thunks 函数

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

腾讯云开发者社区推出了webpack@4.46.0源码分析专栏，为你提供了webpack@4.46.0源码分析的相关文章，致力于帮助开发者快速成长与发展。

webpack@4.46.0源码分析

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐