首页 > Web开发 > 详细

webpack构建流程

时间:2020-06-05 14:04:47      阅读:77      评论:0      收藏:0      [点我收藏+]

日常经常说webpack打包,但是webpack打包的流程是什么,我一般没有关注过。现在大概记录一下打包流程:

1 初始化参数:解析webpack配置参数,合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果;

2 开始编译:上一步得到的参数初始化compiler对象,注册所有配置的插件,插件监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的 run 方法开始执行编译;

3 确定入口:从配置的entry入口,开始解析文件构建AST语法树,找出依赖,递归下去;

4 编译模块:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;

5 完成模块编译并输出:递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据entry或分包配置生成代码块chunk;

6 输出完成:输出所有的chunk到文件系统

 

webpack流程:

转载:https://www.cnblogs.com/wuyifu/p/5993911.html

webpack构建流程

原文:https://www.cnblogs.com/liumcb/p/13049171.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!