Webpack知识体系|青训营笔记

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

Webpack的学习

什么是webpack

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

• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、TS、CofferScript、Less、Sass
• 支持模块化处理css、图片等资源文件
• 支持HMR + 开发服务器
• 支持持续坚挺、持续构建
• 支持代码分离
• 支持Tree-shaking
• 支持Sourcemap
• ...

核心流程————极度简化版

1.入口处理

从'entry'文件开始，启动编译流程

2.依赖解析

从'entry'文件开始，根据'require' or 'import'等语句找到依赖资源

3.资源解析

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

4.资源合并打包

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

循环调用2、3直到所有资源处理完毕

模块化 + 一致性

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

插件是什么？

前端插件指由js封装的可独立提供使用的ui，实现某一类特定的功能和效果。从组成上来说，由js文件或是js和css共同构成，两种方式。

钩子的核心信息

1.时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情；

2.上下文：通过tapable提供的回调机制，以参数方式传递上下文信息；

3.交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变。

学习方法

1.入门应用

• 理解打包流程
• 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活的搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
• 掌握常见脚手架工具的用法，例如：Vue-cli、create-react-app

2.进阶 理解Loader、Plugin机制，能够自行开发Webpack组件 理解常见性能优化手段，并能用于解决实际问题 理解前端工程化概念与生态现状

3.大师级 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建