webpack面试题-基本概念及构建过程

webpack概念

webpack的作用、理解、定义，解释

entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。

module：模块，在Webpack里一切皆模块，一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。

bundle：是由webpack打包出来的文件

chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块，一个Chunk由多个模块组合而成。

loader：将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程

plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果或做我们想要的事情。

output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果。

webpack安装

npm install webpack

webpack执行命令

npx webpack

webpack基本功能

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：压缩 JavaScript、CSS、html 代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行的代码让其异步加载
模块合并：在采用模块化开发的项目有很多模块和文件，需要构建功能把模块合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack执行过程

1. 初始化 Compiler：new Webpack(config) 得到Compiler对象
2. 开始编译 调用 Compiler 对象 run 方法 开始执行编译
3. 确定入口：根据配置中的 entry 找出所有的入口文件
4. 编译模块：从入口文件出发，调用所有配置的 loader 对模块进行编译，再找出该模块依赖的所有模块，递归直到所有的模块都被加载进来
5. 完成模块编译：在经过第4步后，得到了每个模块被编译后的最终内容以及它们之间的依赖关系
6. 输出资源：根据入口和模块之间的关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表。
7. 输出完成：确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

webpack的构建流程

1. 校验配置文件
   将cli参数和webpack配置文件中的配置整合得到一个完整的配置对象
2. 生成Compiler对象
   webpack在启动时会实例化插件对象，在初始化compiler对象之后会调用插件的apply方法传入compiler对象，插件实例会在apply方法中注册感兴趣的钩子，webpack在执行过程中会根据构建阶段回调相应的钩子
   载入webpack核心模块，创建compiler对象，通过compiler编译整个项目
3. 初始化默认插件
4. run阶段：如果运行在watch模式就执行watch方法否则就执行run方法
5. compilation阶段：创建compilation对象回调compilation相关钩子
6. emit阶段：文件内容准备完成，准备生成文件，这是最后一次修改最终文件的机会
7. afterEmit阶段：文件已写入磁盘完成
8. done阶段：完成编译