# fed-e-task-02-02

**Repository Path**: rpyoyo/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**: 1
- **Forks**: 0
- **Created**: 2020-09-26
- **Last Updated**: 2021-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简答题

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

webpack的构建流程主要包含以下环节

+ 以entry配置的（一个或多个）文件入口，递归解析entry依赖的所有module，生成依赖树
+ 根据module.rules中配置的loader规则，对相应类型的module文件进行加载，并调用配置的loader进行转换处理
+ 以entry为分组将相应依赖module的集合处理后的结果输出到指定的chunk文件中
+ 在整个构建流程中，根据plugins中配置的各种插件，监听并在相应的任务点触发执行plugin插件定义的任务，对构建任务实现优化

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

### Loader

+ loader主要用于资源的加载与转换处理
+ 多个loader可以按顺序配合使用
+ loader定义一个处理函数，接收加载的模块内容（或上个loader的处理结果）作为参数，返回转换处理的结果
+ 最终执行的loader需要输出js代码

### Plugin

+ plugin主要用于处理打包以外的其他自动化构建任务，例如清除指定目录，拷贝资源文件，自动生成html文件等
+ plugin基于hook机制实现，必须是一个函数、或者包含apply方法的对象，接收compiler对象作为参数

### Loader开发思路

+ 定义一个处理函数，接收加载的模块内容（或上个loader的处理结果）作为参数，
+ 在函数中对加载的模块内容按照需求进行处理
+ 返回转换处理的结果，如果是单独使用的loader或者最终执行的loader，需要出数js代码

### Plugin开发思路

+ 定义一个函数，或者包含apply方法的class
+ apply方法接收一个compiler对象作为参数
+ 使用complier对象暴露的webpack生命周期钩子注册并调用插件
+ 定义回调函数处理钩子触发时需要执行的操作，回调函数接收compilation对象作为参数，通过compilation可以访问加载的module相关的内容

# 编程题

## 使用Webpack实现Vue项目打包任务

详见code目录