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

魔法少女蕊蕊
87 阅读2分钟

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

为什么要学习webpack

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

1. 什么是webpack

前端项目有什么构成？——资源

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

2. 使用webpack

image.png

image.png

核心流程

image.png

模块化+一致性

  1. 多个文件资源合并成一个，减少http请求数
  2. 支持模块化开发
  3. 支持高级JS特性
  4. 支持Typescript、CoffeeScript方言
  5. 同意图片、CSS、字体等其他资源的处理模型
  6. Etc···

使用Webpack

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

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

image.png

流程类配置

image.png

配置总览

image.png

image.png

处理css

image.png

image.png

image.png

image.png

接入Babel

image.png

image.png

image.png

生成HTML

image.png

image.png

image.png

工具线

image.png

image.png

HMR

image.png

Tree-Shaking

树摇--用于删除Dead Code

image.png

image.png

image.png

image.png

3. 理解Loader

因为webpack只认识js

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

使用Loader

image.png

认识Loader

链式调用

image.png

其他特性

image.png

编写Loader

image.png

常见Loader

image.png

image.png

4. 理解插件

image.png

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

image.png

image.png

首先，插件围绕“钩子”展开

image.png

钩子的核心信息：

  1. 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情。
  2. 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息。
  3. 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

image.png

image.png

image.png

小结

image.png

image.png

5. 学习方法

image.png

image.png

avatar
文章
阅读
粉丝