Webpack打包流程

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

初始化:启动构建,读取与合并配置参数,加载 Plugin,实例化 Compiler

编译:从 Entry 出发,针对每个 Module 串行调用对应的 Loader 去翻译文件的内容,再找到该

Module 依赖的 Module,递归地进行编译处理

输出:将编译后的 Module 组合成 Chunk,将 Chunk 转换成文件,输出到文件系统中

具体为:

初始化参数 :从配置文件和 Shell 语句中读取并且合并参数得出最终的参数

开始编译 :用上一步得到的参数初始化 Compiler 对象加载所有配置的插件,执行对象的 run 方

法开始执行编译

<center><h5>git pull = git fetch + git merge</h5></center>确定入口 :根据配置中的 entry 找出所有的入口文件

编译模块 :从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模

块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

完成模块编译 :在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容

以及它们之间的依赖关系

输出资源 :根据入口和模块之间的依赖关系组装成一个个包含多个模块的 Chunk,再把每个

Chunk 转独的文件加入到输出列表,这步是可以修改输出内容的最后机会

输出完成 :在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值