本阶段主要以前端工程化为主题,分别从脚手架工具、自动化构建、模块化开发、规范化标准四个维度介绍前端工程化具体该如何落地、如何实践,以此应对复杂前端应用的开发和维护过程,提高开发者的工作效率,降低项目维护成本,从而更好地适应大前端时代下的前端开发工作。
模块化开发与规范化标准
此模块中会介绍当下前端开发过程中最重要的开发范式:模块化,我们会介绍模块化在前端行业的演进过程、如何实现模块化开发以及 Webpack 打包工具的使用和核心工作原理;
另外我们还会为你介绍几个其它的打包工具;
最后通过落实规范化,通过工具保证团队的代码质量,让整个团队的代码更漂亮。
初始化参数 :从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
开始编译 :用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
确定入口 :根据配置中的 entry 找出所有的入口文件
编译模块 :从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
完成模块编译 :在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
输出资源 :根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后- 机会;
输出完成 :在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
loader
用于做资源转换,把 JavaScript
和其他非 Javascript
资源转换成,JavaScript
模块
webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
Loader
通过 匹配 资源 类型 获取到 资源 内容,在 loader
对内容做处理,然后将处理后内容返回出去,交给 webpack
或者其他 loader
处理
Plugin
利用 webpack
的 hook (钩子) 机制,在 webpack
的生命周期中,对 webpack
的构建工作做扩展
先下载任务的基础代码 百度网盘链接: https://pan.baidu.com/s/1pJl4k5KgyhD2xo8FZIms8Q 提取码: zrdd
这是一个使用 Vue CLI 创建出来的 Vue 项目基础结构
有所不同的是这里我移除掉了 vue-cli-service(包含 webpack 等工具的黑盒工具)
这里的要求就是直接使用 webpack 以及你所了解的周边工具、Loader、Plugin 还原这个项目的打包任务
尽可能的使用上所有你了解到的功能和特性
项目基础代码下载地址:
百度网盘链接: https://pan.baidu.com/s/1pJl4k5KgyhD2xo8FZIms8Q 提取码: zrdd
说明: 本次作业中的编程题要求大家完成相应代码后(二选一)
简单录制一个小视频介绍一下实现思路,并演示一下相关功能。
提交一个项目说明文档,要求思路流程清晰。
最终将录制的视频或说明文档和代码统一提交至作业仓库。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。