Webpack知识体系 | 青训营笔记

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

今日学习内容：Webpack相关知识体系

一、什么是Webpack

前端项目由资源组成

由于手工管理非常繁琐，于是出现了webpack等打包工具

二、使用Webpack

其核心流程为：

1. 入口处理：从entry文件开始，启动编译流程
2. 依赖解析：从entry文件开始，根据require或import等语句找到依赖资源
3. 资源解析：根据module配置，调用资源转移器，将png、css等非标准ja资源转译为js内容
4. 递归调用2，3，直到所有资源处理完毕
5. 资源合并打包：将转译后的资源内容合并并打包为可直接在浏览器运行的js文件

模块化+一致性：

如何使用？

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

1. 流程类配置

配置总览：

按使用频率来看：

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

2. 工具类配置：

其他工具包括：

1. 缓存
2. Sourcemap
3. 性能监控
4. 日志
5. 代码压缩
6. 分包

3. 理解Loader

问题：Webpack只认识js

所以为了处理非标准js资源，设计出资源翻译模块：Loader，用于将资源翻译为标准js

Loader的链式调用：

• less-loader：实现less到css的转换
• css-loader：将css包装成类似module.export="${css}"的内容，包装后的内容符合JavaScript语法
• style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

其他特性包括：

1. 链式执行
2. 支持异步执行
3. 分normal、pitch两种模式

四、理解插件

插件架构需要解决的问题在于：

1. 新人上手成本高
2. 功能迭代成本高
3. 功能僵化，缺乏成长性，生命力弱

其精髓在于：对扩展开放，对修改封闭

钩子的核心信息：

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

五、知识点总结