webpack知识体系(下)|青训营笔记

138 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第20天

前端基础班第12节:webpack知识体系。

webpack知识体系(上)|青训营笔记 - 掘金 (juejin.cn)

接上篇

三.进阶:理解loader

作用:将资源转换成标准JS

1.使用loader

image.png

2.链式调用

image.png

3.其他特性

image.png

特点:

  • 链式执行
  • 支持异步执行
  • 分normal、pitch两种模式

4.如何编写loader

image.png

5.常见loader

image.png

四.进阶:理解插件

1.为什么设计“插件”

image.png image.png

2.使用插件

image.png image.png

3.理解插件

“钩子”某种程度上可以理解为一个事件 image.png

核心:

  • 时机
  • 上下文
  • 交互
image.png image.png

4.小结

image.png

五.学习方法

入门、进阶、大师

image.png

适合新手学习:

image.png