持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情
经常会被问到webpack的编译流程，首先先了解几个核心概念，再了解具体的编译流程。
核心概念
| 概念 | 描述 |
|---|---|
| Entry | 指定webpack开始构建的入口模块 |
| Output | 指定webpack命名输出的文件以及输出的目录 |
| Module | 指模块的概念，在webpack中，一切皆模块，一个模块对应一个文件 |
| Chunk | 代码分割的产物，可以将一些代码打包成一个单独的chunk |
| Loader | 模块转换器，Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，需要调用loader对模块原内容进行翻译转换 |
| Plugin | 扩展插件，可以完成更多编译过程中 loader 不能完成的功能。在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情 |
| Compiler对象 | 包含了wepack的完整配置（entry、output、loaders等配置）,该对象启动时会被实例化，且全局唯一。 |
| Compilation对象 | 代表了一次资源版本构建，每次构建产生一次新的Copilation，从该Copilation对象表现了当前的模块资源，编译生成资源，变化的文件以及被跟踪依赖的状态信息。同时该对象也提供了很多事件回调供插件做扩展。 |
编译流程
webpack编译流程主要分为三个阶段：初始化，编译和输出阶段
初始化
启动构建
读取与合并配置参数
加载Plugin
实例化Complier
编译
从Entry出发，针对每个Module调用对应Loader翻译文件
再找到该Module依赖的Module，递归地进行编译处理
对编译后的Module组成Chunk及对应资源assets
输出
把编译过程得到的assets输出到文件系统
