# fed-e-task-02-02

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

## Basic Information

- **Project Name**: fed-e-task-02-02
- **Description**: part2 模块二 模块化开发与规范化标准
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-27
- **Last Updated**: 2021-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-02-02

#### 介绍
Part 2 前端工程化实战
模块二 模块化开发与规范化标准

#### 简答题答案以及说明

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

webpack 是一个现在主流的模块化打包工具，在了解它有哪些环节之前，先对一下核心概念做了解：

- Entry：打包入口，webpack 执行构建的第一步将从该入口开始，可以通过数组或对象配置多个；
- Module：模块，webpack 中一切皆模块，每个模块对应的是一个文件，webpack 会从 entry 开始递归寻找所有依赖的模块；
- Loader：加载器，Loader 机制是 webpack 的核心，通过 rules 进行配置，它负责资源文件从输入到输出的转换，可以看作一个管道，同一个资源可使用多个 loader，执行顺序从后往前；
- Plugin：插件，是用来增强 webpack 项目自动化能力的利器，它通过在构建生命周期的钩子中挂载函数来实现扩展；
- Chunk：代码块，一个 chunk 由多个模块组合而成，用于代码合并与分割；
- Output：输出结果，通过 webpack 构建后得到的最终结果。

在项目中启动 webpack 后，webpack 会从散落的项目代码中找到配置的 Entry 模块（默认为项目根目录下的 main.js）；根据文件 的 import 或 require 语句，推断出文件的依赖的资源模块，递归解析资源模块的依赖模块；每找到一个 Module，就会根据配置的 Loader 去找对应的转换规则；这些模块会以 Entry 为单位进行分组，一个 Entry 及其所有依赖的 Module 被分到一个 Chunk。

最后 webpack 会将所有的 Chunk 转化为文件输出 Output，在整个构建流程中，webpack 会在恰当的时机执行 Plugin 插件里定义的逻辑。


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

Loader 与 Plugin 的区别如上题所述，Loader 是文件的加载器，通过对不同类型资源的不同配置实现对文件的转换，而 Plugin 是在webpack 构建流程中的特定时机注入扩展逻辑，来改变构建结果。

我们通常使用 Loader 和 Plugin 都需要通过 npm 下载相应的模块开发依赖，我们可以将两者都构建为 npm 模块，也可以在项目代码中通过一个模块输出。

Loader 加载器导出一个函数，该函数是对加载资源的处理过程，函数的输入是加载的资源文件，输出是加工后的结果。

Plugin 通过[钩子机制](https://v4.webpack.js.org/api/compiler-hooks/)实现，导出一个函数或一个包含 apply 方法的对象，一般把插件定义为一个 class，在 class 中定义 apply 方法。接收 compiler 编译器参数，在 apply 方法内部 compiler hook 的 tap 方法第一个参数是驼峰式命名的插件名称，第二个参数函数内部实现构建过程。