构建webpack知识体系 | 青训营笔记

用户835936271820
63 阅读4分钟

构建webpack知识体系 | 青训营笔记

这是我参加【第五届青训营】笔记创作活动的第10天

今天学习了webpack相关知识，首先要了解的是我们为什么要学习webpack？

  • 理解前端“工程化”概念、工具、目标；
  • 一个团队总有那么几个人熟悉webpack，某种程度上可以成为个人的核心竞争力；
  • 高阶前端必经之路。

课程内容：

image-20220810100928718.png

课程目标：

image-20220810100950407.png

01—什么是webpack

前端项目由什么构成？———前端项目往往是由很多资源构成的。

e.g.PNG JPG GIF WEBP JS TS css Less Vue JSX Sass…

当然，可以手动管理这些资源：

image-20220810101254336.png

但，依赖手工，比如有50个JS文件…操作，过程繁琐；

  • 当代码文件之间有依赖的时候，就得严格按依赖顺序书写；
  • 开发与生产环境一致，难以接入TS或JS新特性；
  • 比较难接入Less、Sass等工具；
  • JS、图片、CSS资源管理模型不一致；

这些都是旧时代非常突出的问题，对开发效率影响很大。

为了解决这些问题，出现了很多工程化工具。某种程度上正是这些工具的出现，才有了“前端工程”这一概念。

image-20220810101804187.png

本质上是一种前端资源编译、打包工具

image-20220810101950679.png

02—使用webpack

02-1—示例

1.安装；2.编辑配置文件；3.执行编译命令。

image-20220810102035565.png

02-2—核心流程———极度简化版

1.入口处理；2.依赖解析；3.资源解析；递归调用2、3，直到所有资源处理完毕；4.资源合并打包。

image-20220810102243146.png

本质上，两件事：模块化+一致性

image-20220810103459281.png

02-3—怎么使用webpack

关于webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可分为两类：

  • 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项；
  • 工具类：主流程之外，提供更多工程化能力的配置项。

image-20220810103555586.png

02-3-1—流程类配置

entry→require import→module→output

image-20220810103801510.png

按使用频率：

  • entry/output;
  • module/plugins;
  • mode;
  • watch/devServer/devtool.

image-20220810104034408.png

02-3-1.1—文件结构

image-20220810104111529.png

02-3-1.2—处理css

image-20220810104215602.png

image-20220810104236935.png

image-20220810104254017.png 问题：

  • Loader有什么作用？为什么这里需要用到css-loader、style-loader？
  • 与旧时代———在HTML文件中维护css相比，这种方式会有什么优劣处？
  • 有没有接触过Less、Sass、Stylus这一类CSS预编译框架？如何在webpack接入这些工具？

参考资料：

Css-loader;

Webpack原理系列七：如何编写Loader;

Style-loader.

02-3-1.3接入Babel

image-20220810104738025.png

image-20220810104756910.png

思考题：

  • Babel具体有什么功能？
  • Babel与webpack分别解决了什么问题？为何两者能协作到一起？

参考资料：

Babel-loader;

Babel官网；

@babel/preset-env;

@babel/preset-react;

@babel/preset-typescript.

02-3-1.4—生成HTML

image-20220810105523510.png

image-20220810105535293.png

思考题：

相比于手工维护HTML内容，这种自动生成的方式有什么优缺点？

参考资料：html-webpack-plugin

02-3-2—工具线

image-20220810110517129.png

02-3-2.1—HMR

image-20220810110813357.png

image-20220810110559085.png

02-3-2.2—Tree-Shaking

image-20220810110832475.png

image-20220810110846315.png

image-20220810110936315.png

02-3-3—其他工具

image-20220810111002994.png

思考题：

除上面提到的内容，还有哪些配置可划分为“流程类”配置？

工具类配置具体有什么作用？包括‘devtool/cache/stat’等

03—进阶篇：理解Loader

问题：webpack只认识JS

image-20220810113701967.png

为了处理非标准JS资源，设计出资源翻译模块———Loader

用于将资源翻译为标准JS

03-1—使用Loader

image-20220810113828921.png

03-1.1—认识Loader：链式调用

image-20220810113935528.png

03-1.2—认识Loader：其他特性

image-20220810114020242.png

03-2—如何编写Loader

image-20220810114119950.png

03-3—常见Loader

image-20220810114151376.png

思考题：

Loader输入是什么？要求的输出是什么？

Loader的链式调用是什么意思？如何串联多个Loader？

Loader中如何处理异步场景？

参考资料：

—《Webpack原理系列七：如何编写loader》

04—进阶篇：理解插件

04-1—插件是什么？为什么这么设计？

很多知名工具，如：

  • VS Code、Web Storm、Chrome、Firefox;
  • Babel、Webpack、Rollup、Eslint;
  • Vue、Redux、Quill、Axios.

等等，都设计了所谓“插件”结构，为什么？

image-20220810114726929.png 这是一个特别复杂的过程，那么：

  • 新人需要了解整个流程细节，上手成本高；
  • 功能迭代成本高，牵一发动全身；
  • 功能僵化，作为开源项目而言缺乏成长性；
  • Blabla;

心智成本高=>可维护性低=>生命力弱

插件架构精髓：对扩展开放，对修改封闭。

甚至，webpack本身的很多功能也是基于插件实现的。

04-2—理解插件

image-20220810115126952.png

image-20220810115203538.png

用起来简单，写起来难

首先，插件围绕“钩子”展开 image-20220810115404806.png

image-20220810115416833.png

image-20220810115428593.png

思考题：

Loader与插件有什么共同点？

“钩子”有什么作用？如何监听钩子函数？

参考资料：

《Webpack插件架构深度讲解》

《[万字总结]一文吃透Webpack核心原理》

04-3—小结

我们前面学了：

  • Webpack的作用；
  • 理解Webpack配置结构，学习关键配置项；
  • Loader的作用与常用Loader;
  • 插件基本形态与作用。

image.png

05—学习方法

image-20220810115952936.png

image (1).png

avatar
文章
阅读
粉丝