webpack源码阅读解析笔记

webpack 编译模块的基本流程:

1.调用webpack函数接收config配置信息,并初始化compiler,在此期间会apply所有 webpack 内置的插件;
2.调用compiler.run进入模块编译阶段;
3.每一次新的编译都会实例化一个compilation对象,记录本次编译的基本信息;
4.进入make阶段,即触发compilation.hooks.make钩子,从entry为入口:
a. 调用合适的loader对模块源码预处理,转换为标准的JS模块;
b. 调用第三方插件acorn对标准JS模块进行分析,收集模块依赖项。同时也会继续递归每个依赖项,收集依赖项的依赖项信息,不断递归下去;最终会得到一颗依赖树🌲;
5.最后调用compilation.seal render 模块,整合各个依赖项,最后输出一个或多个chunk;

以下为简单的时序图:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容