1 Star 0 Fork 0

Baboon-lagou / fed-e-task-02-02

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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 项目打包任务

具体任务及说明:

先下载任务的基础代码 百度网盘链接: 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. 提交一个项目说明文档,要求思路流程清晰。

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

Repository Comments ( 0 )

Sign in to post a comment

About

模块化开发与规范化标准 expand collapse
JavaScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://git.oschina.net/Baboon-lagou/fed-e-task-02-02.git
git@git.oschina.net:Baboon-lagou/fed-e-task-02-02.git
Baboon-lagou
fed-e-task-02-02
fed-e-task-02-02
master

Search