Part 2 · 前端工程化实战

本阶段主要以前端工程化为主题，分别从脚手架工具、自动化构建、模块化开发、规范化标准四个维度介绍前端工程化具体该如何落地、如何实践，以此应对复杂前端应用的开发和维护过程，提高开发者的工作效率，降低项目维护成本，从而更好地适应大前端时代下的前端开发工作。

fed-e-task-02-02

模块化开发与规范化标准

此模块中会介绍当下前端开发过程中最重要的开发范式：模块化，我们会介绍模块化在前端行业的演进过程、如何实现模块化开发以及 Webpack 打包工具的使用和核心工作原理；

另外我们还会为你介绍几个其它的打包工具；

最后通过落实规范化，通过工具保证团队的代码质量，让整个团队的代码更漂亮。

练习题

简答题

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

• 初始化参数 ：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

• 开始编译 ：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；

• 确定入口 ：根据配置中的 entry 找出所有的入口文件

• 编译模块 ：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

• 完成模块编译 ：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；

• 输出资源 ：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后- 机会；

• 输出完成 ：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

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

• Loader: 加载器

loader 用于做资源转换，把 JavaScript 和其他非 Javascript 资源转换成，JavaScript 模块

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

• Plugin: 插件

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

• 开发 Loader

通过 匹配 资源 类型 获取到 资源 内容，在 loader 对内容做处理，然后将处理后内容返回出去，交给 webpack 或者其他 loader 处理

• 开发 Plugin

利用 webpack 的 hook （钩子） 机制，在 webpack 的生命周期中，对 webpack 的构建工作做扩展

编程题

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

• clickMe

具体任务及说明：

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

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

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

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

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

Other

项目基础代码下载地址：

百度网盘链接: https://pan.baidu.com/s/1pJl4k5KgyhD2xo8FZIms8Q 提取码: zrdd

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

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

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

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