• 入口 entry
  • 出口 output
  • loader
  • plugins

webpack是js程序的 静态模块打包工具，当webpack运行时，会从entry（入口）开始构建依赖图，然后将项目中所需的模块组合成一个或多个静态资源bundles。

运行流程

初始化流程 -> 编译构建流程 -> 输出流程

初始化流程

从配置文件及shell中读取参数，并初始化插件及配置执行环境中所需参数
配置文件默认为webpack.config.js，其中配置项有entry、output、loader、plugins等
webpack将配置项写入options对象并加载plugins后开始初始化Compiler编译对象，Compiler拥有多个生命周期钩子函数，在各个生命周期调用对应方法。

编译构建流程

在初始化完成后，Compiler的run方法被调用来启动编译构建流程。此时webpack会从entry出发，针对每个module串行调用对应的loader去编译内容，再找到该module依赖的module，递归地进行编译处理。
主要流程：

  • compile 开始编译

构建compilation对象，该对象主要执行以下流程：执行模块创建、依赖收集、分块、打包等

  • make 从entry开始编译模块及其依赖的模块，创建模块对象

执行_addModuleChain()函数，根据依赖使用对应的工厂函数创建module对象，将module存入compilation.modules、dependencies.modules等对象中；随后执行build-module

  • build-module 构建模块

调用配置的loaders将module转成js模块

  • seal 封装构建结果

生成chunks，对chunks进行优化操作并生成主要输出代码

  • emit 输出chunk到结果文件

根据output配置生成输出文件

该系列参考