# fed-e-task-02-02

**Repository Path**: S_L_G/fed-e-task-02-02

## Basic Information

- **Project Name**: fed-e-task-02-02
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-02-02

### 1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

1. 初始化阶段

   1. 合并配置参数：从配置文件和 shell 语句中读取合并参数。
   2. 初始化 compiler 对象：根据配置初始化 compiler 对象。`compiler` 可以理解为 `webpack` 编译的调度中心，是一个编译器实例，在 `compiler` 对象记录了完整的 `webpack` 环境信息，
   3. 初始化插件：调用插件的 apply 方法，初始化插件。

2) 构建编译阶段

   1. 初始化 compiler: 调用 run 方法启动构建，生成 compilation 对象

   2. 生成 modules:

      1. 根据配置文件中 entry 找到入口文件,调用 loader 处理生成 module。
      2. 找到入口文件的依赖，调用 loader 处理依赖生成 module。然后处理依赖的依赖，直到处理完所有模块，得到 modules，及以 entry 为根的依赖关系图。

   3. 生成 chunks:
      1. 遍历依赖关系图，为每一个 module 生成一个 chunk。
      2. 根据配置和插件优化 chunk，最后得到优化后的 chunks。

3. 输出资源阶段

   1. 遍历 chunks，生成源码存储到 compolation.assets 中。
   2. 触发 emit，将 assets 中的资源写入到文件系统。
   3. 然后触发 done。流程结算

### 2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

1. 作用不同，loader 是为了让 webpack 拥有加载解析非 JavaScript 资源的能力。plugin 则是为了扩展 webpack 的功能。
2. 生命周期，loader 只能在编译转义资源时起作用，plugin 则是在 webpack 任何生命周期都可以使用。

1) loader 类似于管道机制，可以链式调用传给另一个 loader 或最终传给 webpack。编写 loader 应该遵守单一原则，一个 loader 只处理一个事情。
2) plugin 则是利用钩子机制实现的，webpack 会在生命周期广播很多事件，plugin 可以监听这些事件，并修改 compilaton 对象来改变资源。