webpack打包

webpack是一个插件架构,所有功能都以插件的形式集成在构建流程中,并通过发布订阅事件来触发各个插件的执行。

核心类是Tapable,用它来实现插件的实例化及挂载。

optimist是node的工具库,根据webpack.config.js及shell options生成option,options包含构建需要的重要信息;(entry-options)

webpack创建compiler实例,如果options是数组,则创建多个compiler(compiler包含compiler与watching两个对象),

初始化compiler,为compiler添加上下文context和options,初始化基本插件,把options对应的选项进行require;

compiler调用run,run内调用compile方法,开始编译;(make)

compiler内创建compilation对象,并将this传入,compilation就包含了对compiler的引用;

compiler调用addEntry,addEntry调用_addModuleChain();

_addModuleChain查询合适的工厂函数创建模板,并将其加入module链当中,调用buildModule(),对模块进行build(build-module);

buildModule是核心,包括**module.js内调用的build(),build调用doBuild来查找合适的loader,并在回调函数内解析源文件,生成AST,来记录源码间的依赖行为,创建depedency加入依赖数组(期间调用addModuleDepedencies);

module创建完毕;

compilation调用seal(after-compile),添加hash,调用addModule、addChunk(将module装入chunk)对chunk和module开始封装、合并、抽取公共模块,生成编译后的源码

compilation调用createChunkAsset,开始生成最终代码;

createChunkAsset内根据不同的module,调用MainModule.render,chunkTemplate.render进行进一步处理

MainModule.render,chunkTemplate.render内调用moduleTemplate.render

最终生成_webpack_require格式。

moduleTemplate.render调用module.source

module.source将生成好的代码放入compilation.assets中

Compiler.emitAssets将compilation的assets输出到目录中

webpack的template有四种子类

MainTemplate.js 生成项目入口文件

ChunkTemplate.js 异步加载的js

ModuleTemplate.js 对所有模块的一个代码生成

HotUpdateChunkTemplate.js 对热替换的处理

依赖(dependency)

每一个module都有dependencies字段,这是它的依赖数组,而每一个依赖对象都有一个module字段,指向被依赖的module,这样module就能找到它依赖的那些module。dependency有许多子类,如AMDRequireDependency、CommonJsRequireDependency、SystemImportDependency等,分别对应AMD、commonJs、es6等的加载规范。

原文地址:https://www.cnblogs.com/yanze/p/7999550.html