# fed-e-task-01-04

**Repository Path**: hanfengmi/fed-e-task-01-04

## Basic Information

- **Project Name**: fed-e-task-01-04
- **Description**: fed-e-task-01-04
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-20
- **Last Updated**: 2023-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 四周作业

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

> 构建流程: 项目下yarn init初始化，安装webpack+webpack-cli开发依赖，之后再webpack启动后，会从entry入口开始，递归解析entry依赖的各个模块，并根据相关loader进行解析转换，并根据配置执行plugin中的相关配置完成代码优化任务，最终将打包结果返回。   

> 打包过程: 最终打包结果是个立即执行函数，接受一个数组参数，数组的每项又是一个函数，包裹着源代码中的各个模块，立即执行函数内部定义了一个初始对象，用来存放加载过的模块，又定义了一个__webpack_require__ 函数，用来加载各个模块，之后在require函数上挂载相应属性和工具函数，之后从第0个模块开始加载。打包的最终目的即将模块与模块放到同一个文件下，并保持其依赖关系。

### 2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。
> loader与plugin的差异：   
loader机制是webpack的核心，专注实现资源模块的加载 
plugin插件是为了增强webpack的自动化能力，主要解决除资源模块外的其他自动化工作，相对于loader,plugin有更宽的能力范围。

> 开发loader: 负责资源文件从输入到输出的转换，导出一个函数，输入是接收到的值，最终导出处理过的内容，导出的结果必须是一个javascript代码。对同一个资源可以一次使用多了loader进行处理。

> 开发plugin，通过钩子机制实现，插件必须是一个函数或者是一个包含apply方法的对象，定义一个对象，含有apply方法，方法接收一个compiler的参数，包含所有的配置信息，根据webpack的API找到相应钩子，注册相应函数，参数为插件名称和挂载的函数，使用compilation获取执行上下文，进行相关逻辑处理。

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

1. 开发环境安装webpack+webpack-cli
2. 安装css-loader、style-loader,css-loader是将css转化成模块导出，style-loader是将css包在style标签中引用
3. 解析图片使用url-loader,file-loaderp配合将文件转成bese64直接引用
4. 安装babel-loader、@babel/core、@babel/preset-env解析es6语法