webpack构建流程

webpack分为七个大的组成部分

1.complier 2.compilation 3.chunk 4.parse 5.module 6.dependency 7.template

compiler是webpack构建的入口，它可以拿到所有的环境配置，开始构建的时候compiler会调用run方法，

然后执行run里面的compile方法目的是创建compilation(plugins注册放在tapable里面，compilation.apply.生命周期方法)对象,同时创建一个onCompiled回调，注册插件的生命周期也在此时开始调度

complation对象创建好之后开始执行seal方法，

根据一个个chunk(loader起作用ast->buffer->ast->buffer),利用acorn或者babylon执行parse得到ast,执行transform后得到经过babel转换后的代码，执行getDependencies得到dependencies,通过dependencies递归遍历modules得到{filename,dependencies,transformCode} 

利用modules构建一个filename做key,transformCode放在模版函数里，成为对象的value，和template拼装为字符串，利用writeFileSync写入文件

tapable

tapable的原理利用hook进行注册回调的存储和触发，通过hookCodeFactory控制注册和执行

tapable 两个核心hook hook hookCodeFactory,辅助hook hookMap MultiHook 还衍生了9种hook

　　

 

 basic :分为 synchook asyncSeriesHook asyncParallelHook  不关注返回结果

 loop：分为 syncLoopHook 循环直到所有事件函数返回结果都为undefined

 waterfall：分为asyncSeriesWaterfallHook syncWaterfallHook 前一个事件函数的返回        
 结果当作下一个事件函数的参数

 bail ：分为 syncBailHook asyncSeriesBailHook asyncParallelBailHook 有一个事件函数不为null,跳过剩下所有逻辑

 hook其实分为三类 同步 异步 （串行 并行）

 sync asyncSeries asyncParallel        

 

提取css的原理 当父compiler解析js文件的时候，js中发现有引用css文件，那么会先将css文件当成普通的nomarlModule,然后经过mini-css-extract-plugin.loader处理后，这个nomarlNodule会得到cssDependency，然后在根据cssDependency继续在父compiler创建出css module实例

• 根据chunk生成manifest，然后在根据manifest生成asset

• mini-css-extract-plugin就是利用renderManifest hook来从chunk中剥离css module生成最终的css asset

• webpack最终在输出文件的时候，是以assets来生成文件

chunkhash 针对于js的  contenthash 针对于css的(不改css生成文件，对css是浪费)