webpack的构建流程

webpack构建流程:1.初始化流程,2 编译构建流程,3 输出 流程

1.运行流程

webpack的运行流程是一个串行的过程 。它的工作流程就是将各个插件串联起来。在运行过程 中会广播事件,插件只需要监听他们所关心的事件,就能加入到这条webPack机制中,去改变webpack的动作,使得整个系统扩展性良好 。
从启动到结束会依次执行三大步骤:
初始化流程:从配置文件和shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数
编译构建流程:从entery出发, 针对 每个module串行调用 对应的LOader去翻译文件内容,再找到该Module依赖的Module, 递归地进行编译处理。
输出流程:对编译后的module组合成chunk(大块代码), 把chunck 转换成文件,输出到文件系统。

详细讲解三个流程

  1. 初始化流程:
    从配置文件和shell脚本语句中读取与合并参数 ,得出最终的参数。
    配置文件默认下为webpack.config.js。也或者通过命令的形式指定配置文件,主要作用就是用于激活webpack的加载项和插件。
    webpack将webpack.config.js中的各个配置项拷贝到options对象中,并加载用户配置plugins.
    完成上述步骤后,则开始 初始化编译对象,该 对象掌控者webpack声明周期,不执行具体的任务。只是进行一些高度工作。
    在这里插入图片描述
    compiler对象继承自Tapable,初始化定义 了很多钩子函数 。
    2.详细讲解编译构建流程
    根据配置中的entry找出所有入口文件。
    初始化完成后会调用compiler的run来真正启动webpack编译构建

流程,主要流程如下:
compile开始编译
make从入口点分析模块及其依赖的模块,创建这些模块对象
build-module构建模块
seal封装构建结果
emit把各个chunk输出 到结果文件中

compile编译
当完成上述的compilation对象后。就开始从entery入口 文件开始读取,主要执行_addModuleChain函数。(chain链条)
_addModuleChain中接收参数dependency传入的入口依赖,使用对应的工厂函数NormalModuleFactory.create方法生成一个空的module对象

回调中会把此module存入compilation.modules对象和dependencies.module对象中,由于是入口文件,也会存入compilation.entries中

随后执行buildModule进入真正的构建模块module内容的过程
build module完成模块编译
这里主要调用配置loaders将我们的模块转成标准的JS模块。
在用Loader对一个模块转换完成后,使用acorn解析转换后的内容,输出 对应的抽象语法树(AST), 以方便webpack后面对代码分析 。
从配置的入口模块开始,分析其ast, 当遇到require等导入其他模块语句时,便将其加入到依赖的模块列表中,同时对新找出的依赖模块递归分析,最终搞清所有的模块的依赖关系 。
输出流程
seal输出资源
seal方法主要是要生成chunks, 对chunks进行一系列的优化操作,并生成要输出的代码webpack中的chunk,可以理解为配置在entry中的模块,或者动态引入 的模块。根据入口 和模块之间的依赖关系,组装成一个个包含多个模块chunk, 再打每个chunk转换成一个单独的文件加入到输出列表中。
emit 输出完成
在确定好输出内容后,根据配置确定输出的路径 和文件名

output:{
	path: path.resolve(__dirname, 'build'),
	fileName: '[name].js'
}

在compiler开始后成文件前,钩子emit会被执行,这是我们修改最终文件的最后一个机会。
从而webapck整个打包过程则结束了。
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值