#  fed-e-task-02-02

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

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-16
- **Last Updated**: 2022-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简答题
## 1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。
答：
- 主要环节
     - 会根据我们的配置找到其中的一个文件作为打包的入口（配置文件一般都是js文件）
     - 会顺着入口文件中的代码，根据代码中出现的 import 和 require 之类的语句，
     解析推断出文件所依赖的资源模块
     - 分别去解析每一个资源模块对应的依赖，最后就形成了项目中所有用到的文件之间的依赖关系的
     依赖树
     - 有了这个依赖关系树之后，webpack会去遍历(递归)这个依赖关系树
     - 找到每个节点对应的资源文件
     - 最后会根据配置文件中配置的rules属性，去找到这个模块所对应的加载器，交给对应的加载器去
     加载这个模块
     - 最后会将加载到的结果放到bundle.js当中，从而实现整个项目的打包


## 2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。
答：
- Loader：loader又叫加载器，专门用于资源模块的加载，从而实现整体项目的打包
    - 开发思路：loader其实就相当于一个管道，对匹配的文件内容进行转换，最后将输出的内容
    传给下一个loader。
        - 使用module.export进行模块暴露，返回一个函数并且接收一个参数，接收的参数就是所匹配的文件内容，
        然后根据自己需求转换获取的内容，最后使用return将结果进行返回
    
- Plugin：是webpack的扩展功能，用于解决项目中除了资源加载的其他自动化工作,例如：
实现打包之前清除dist文件、拷贝静态文件到输出目录、压缩输出代码等功能
    - 开发思路：Plugin不像loader只是用于加载模块的时候去使用，可能涉及到webpack的
    每个环节，而webpack官方要求plugin是`一个函数`或者是`包含apply方法的对象`，
    所以自定义个class，在class中定义apply方法，方法接收一个compiler参数，使用
    compiler.hooks.emit.tap方法进行 plugin 的定义，完成自己的需求后，将结果为对象
    返回给compilation.assets，要求对象内必须有 source 和 size