工作原理概括
Entry:入口,webpack执行构建的第一步将从Entry开始,可抽象成输入。Module:模块,在webpack里面一切皆模块,一个模块对应着一个文件。webpack会从配置的Entry开始递归找出所有的依赖的模块- Chunk 代码块,一个Chunk由多个模块组合而成,用于代码合并与分割
- Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
- Plugin:扩展插件,在Webpack构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情
流程概括
Webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程
- 初始化参数:从配置文件和Shell语句中读取与合并参数,得出最终参数
- 开始编译:用上一步得到的参数初始化Compile对象,加载所有配置插件,执行对象的run方法开始执行编译
- 确定入口:根据配置中的entry找出所有的入口文件、
- 编译模块:从入口文件出发,调用所有的配置的Loader对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译:在经过第4步使用Loader翻译完所有的模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
- 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表
- 输出完成:在确定好输出内容后,根据配置确定输出路径和文件名,把文件内容写入到文件系统