# fed-e-task-02-02

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

## Basic Information

- **Project Name**: fed-e-task-02-02
- **Description**: 拉勾大前端作业：Part2 - 模块二
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

```
答：Webpack 的构建流程：
	1. 新建项目，yarn init 初始化项目，将 webpack 安装到项目依赖中
	2. 新建 webpack.config.js 文件，配置打包文件入口和输出配置
	3. 根据项目中的文件格式，安装并配置对应的 loader
	4. 安装并配置 Plugin 解决其他自动化工作
	5. 配置 webpack-dev-server 开启服务并开启开启 HMR
	6. 配置 Source Map
  7. 文件压缩
	8. 配置优化，根据环境不同导出不同配置
	9. 查漏补缺，根据需求进行其他配置优化
```

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

```
答：Loader 和 Plugin 的不同：
  1. Loader 用于对源代码的转换，专注于实现资源模块加载，而 Plugin 目的在于解决其他自动化工作，如清除 dist 目录、拷贝静态文件到输出目录、压缩输出代码等，相比于 Loader，Plugin 拥有更宽的能力范围；
  2. Loader 要求最终结果必须是一段 JavaScript 代码，而 Plugin 要求必须是一个函数或者是一个包含 apply 方法的对象，是通过在生命周期的钩子中挂载函数实现扩展的

  开发思路：
  1. Loader 用于对源代码的转换，将某个类型的文件转换为 javascript，可以链式使用多个 Loader 达到需求；
  2. Plugin 是通过在生命周期的钩子中挂载函数实现扩展的，我们需要访问到 webpack 的钩子函数时执行我们需要的代码，必须是一个函数或者是一个包含 apply 方法的对象
```

二、编程题
1、使用 Webpack 实现 Vue 项目打包任务

```
答：代码：./code
    项目说明文档：./code/README.md
```

具体任务及说明：

先下载任务的基础代码 百度网盘链接: https://pan.baidu.com/s/1pJl4k5KgyhD2xo8FZIms8Q 提取码: zrdd

这是一个使用 Vue CLI 创建出来的 Vue 项目基础结构

有所不同的是这里我移除掉了 vue-cli-service（包含 webpack 等工具的黑盒工具）

这里的要求就是直接使用 webpack 以及你所了解的周边工具、Loader、Plugin 还原这个项目的打包任务

尽可能的使用上所有你了解到的功能和特性

作业要求

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

1.  简单录制一个小视频介绍一下实现思路，并演示一下相关功能。

2.  提交一个项目说明文档，要求思路流程清晰。

最终将录制的视频或说明文档和代码统一提交至作业仓库。