1. 初始化参数

2. 加载所有配置的插件等待触发

3. 初始化 Compiler 对象后，执行 run 方法开始编译

4. 编译后会创建 Compilation 对象，用于走构建流程

5. 从入口路径开始递归

6. 匹配文件交给对应 loader 处理

7. 把文件编译成一个个 chunk.js

8. 再根据配置将 chunk 转换成对应文件

9. 打包到输出目录

   flowchart TD
     config[webpack config]
     entry[entry/**/*]
     js[chunk.js..]
     files[ts/vue/less..]
     loader[..*loader]
     config --> run{run}
     subgraph flow
       run --> Complier
       run -.- |dev mode| Compilation
       Complier --> entry
       Compilation -.-> entry
       entry --> files
       files --> loader
       files -.->|change file| Compilation
       loader --> js
       js --> output
     end
     output --> /dist
     flow --> tapable
     tapable -->|build trigger event| hooks
     hooks --> plugin
     plugin --> flow
   

虚线部分则是开发环境的监听模式，每次文件的改变都会触发 Complier 事件，重新走构建流程，每次的 Compilation 都是一个新的实例，从新的实例中重新构建代码，从而实现热更新。