webpack打包流程(6步)

199 阅读1分钟

webpack打包流程

6步:

  • 初始化参数:先获取配置参数,从4.x版本开始,webpack会有默认配置。合并shell和webpack.config.js配置
  • 开始编译:获取到参数配置后,将配置作为webpack方法参数执行,获取compiler对象。compiler对象内,完成所有插件(Plugin)在事件生命周期中的监听。执行compiler.run,开始编译
  • 获取入口:从entry入口,开始解析文件,构建AST语法树,根据依赖关系,递归获取文件
  • 编译模块:根据文件类型,使用对应的Loader进行对文件的处理,同时在根据依赖关系,循环编译
  • 完成编译:递归完成后,根据文件,生成对应的编译文件和依赖关系。根据entry或者代码分片(split)生成不同的chunk
  • 文件输出:把chunk输出到文件系统