# fed-e-task-02-02

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

## Basic Information

- **Project Name**: fed-e-task-02-02
- **Description**: 2-2作业提交
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-05-13
- **Last Updated**: 2021-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、简答题

#### 1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。
答：这里我想从webpack钩子函数角度出发，因为webpack打包的流程关键点都在钩子函数中体现了。

- `environment` 、`afterEnvironment` ，对应的环节是环境准备，也就是在webpack刚刚从webpack.config.js中读取完内容，从命令行中读取完用户的输入内容，这个阶段。

- `entryOption` ，对应的环节是webpack刚刚把入口js文件路径处理完毕。

-  `afterPlugins` ，对应的环节是初始化内部插件

- beforeRun,run,对应的环节是真正开始运行之前，在此之前应该做好了所有的准备工作，之后是纯粹的运行。

-  `beforeCompile` ，`compile` 对应的环节是编译，也就是webpack最核心的功能——打包js代码的阶段。

-  `emit` ，`afterEmit` 等等对应的是将资源文件输出到目标目录的阶段

-  done，对应的环节是结束，也就是全部工作完成。

　上述流程可以简单总结为：

- 阶段一：获取需要信息：从配置文件，命令行中获取
- 阶段二：初始化：插件,loader等等
- 阶段三：执行webpack主要阶段：根据阶段一的内容，使用阶段二的插件、loader等等，实现编译、内容的修剪等等。
- 阶段四：收尾。

　

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

　答：webpack最核心的功能点是打包js文件，loader就是为此服务，通过loader处理css，图片文件等内容，给webpack核心功能扩展。简而言之：loader服务于模块的加载、打包等等，完全服务于编译阶段。

plugin是为了更好的使用webpack，触发于webpack宏观流程，不局限在编译阶段，面向的是人，比如说自动刷新浏览器，自动编译代码，自动清除dist目录等等。

总结：如果项目少了plugin，会让开发变得麻烦，繁琐，但是不会让需求做不出来，但是如果项目少了loader，会让项目直接瘫痪。

开发loader思路：非常类似于函数式编程，loader导出的是一个纯函数，此纯函数对传入的参数——源文件内容，进行一系列的处理，然后返回处理后的文件内容。所以loader可以实现多个loader对同一类型文件进行处理。

开发plugin思路：和vue中的生命周期函数非常类似。根据需求决定将plugin挂载在哪一个webpack钩子函数，等webpack运行到这个阶段，会自动触发plugin，使其运行。所以开发plugin的重点是了解webpack的执行流程，流程中的重点阶段，还有就是钩子函数中可以使用的参数。

　

　

# 二、编程题

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

具体任务及说明：

1. 在 code/vue-app-base 中安装、创建、编辑相关文件，进而完成作业。
2. 这是一个使用 Vue CLI 创建出来的 Vue 项目基础结构
3. 有所不同的是这里我移除掉了 vue-cli-service（包含 webpack 等工具的黑盒工具）
4. 这里的要求就是直接使用 webpack 以及你所了解的周边工具、Loader、Plugin 还原这个项目的打包任务
5. 尽可能的使用上所有你了解到的功能和特性



**提示：(开始前必看)**

在视频录制后，webpack 版本以迅雷不及掩耳的速度升级到 5，相应 webpack-cli、webpack-dev-server 都有改变。

项目中使用服务器的配置应该是改为下面这样：

```json
// package.json 中部分代码
"scripts": {
	"serve": "webpack serve --config webpack.config.js"
}
```

vue 文件中 使用 style-loader 即可

其它问题, 可先到 https://www.npmjs.com/ 上搜索查看相应包的最新版本的配置示例, 可以解决大部分问题.



#### 作业要求

本次作业中的编程题要求大家完成相应代码后

- 提交一个项目说明文档，要求思路流程清晰。
- 或者简单录制一个小视频介绍一下实现思路，并演示一下相关功能。
- 最终将录制的视频或说明文档和代码统一提交至作业仓库。