Webpack ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 10 天为什么学习Webpack Web

这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

为什么学习Webpack

Webpack已逐渐成为工程化体系的中枢

学习Webpack可以：

掌握工程化概念、工具、目标
团队需要有人来熟悉，能够提升核心竞争力
高阶前端必经之路

前端资源：PNG、JPG、GIF、WEBP、JS、TS、CSS、LESS、VUE、JSX、SASS...

各类文件的规范等处理对开发效率有很大影响

📦打包工具：

Gulp
Webpack
Vite
rollup ...

Webpck本质上是一个前端编译、打包工具

包括以下特性：

多份资源文件打包Bundle
支持Babel、Eslint、TS、Less...
支持模块化处理CSS、图片等资源文件
支持HMR + 开发服务器
支持持续监听、持续构建
支持代码分离
支持Tree-sharking
支持Sourcemap

核心流程

入口处理

从entry文件为入口，启动编译流程

依赖解析

根据entry文件require、import等语句找到依赖资源

资源解析

根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

(2-3步递归处理直至找到全部文件)

资源合并打包

将转译后的资源内容合并并打包为可直接在浏览器运行的JS文件

模块化 + 一致性

多个资源合并，减少http请求
支持模块化开发
支持高级JS特性
支持ts等
统一图片、css、字体等其他资源处理 ...

配置项分类

流程类

作用于流程/环节中，影响打包后等最终产物

entry
context
resolve
externals
module
optimization
mode
target

工具类

主流程外提供更多工程化能力

Loader

Webpack只认识JS代码，为了处理非JS资源

链式调用，以less为例

编写一个简易的loader

插件

优点：

对扩张开放、对修改关闭
优化单一系统，功能迭代成本高（牵一发而动全身）
解决他人入手需了解全部体系，维护成本高

插件围绕钩子展开

class SomePlugin {
    apply(compiler) {
        compiler.hooks.thisCompilation.tap('SomePlugin', (compilation) => {
        })
    }
}

钩子核心信息：

时机：编译过程的特定节点，Wepack会以钩子形式通知插件正在发生什么事
上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
交互：上下文参数中附带side effect交互接口，插件可通过这些接口改变

分别对应插件：

总结

本次课程讲解了Webpack的知识，自己对于Webpack在使用上来说算是比较熟练，但是对于文杰老师以源码层面debug入手来讲解Webpack对我来说有很大收益。相信自己以后能够越来越深入学习剖析Webpack原理。

Webpack ｜ 青训营笔记