这是我参与「第五届青训营 」笔记创作活动的第17天
一、重点内容介绍：
1、什么是Webpack?
2、Webpack打包核心流程
3、如何使用Webpack
二、详细知识点
1、什么是Webpack?
- 前端项目由资源构成（PNG、WEBP、GIF、JS、TS、Less、Vue、JSX、Sess...）
- 而在早期的前端开发过程中，我们需要手动管理这些资源，往往会产生很多问题
- Webpack本质上是一种前端资源译、打包工具。
- Webpack会分析模块之间的依赖关系，然后使用loaders处理它们。
- 最后生成一个优化并合并后的静态资源。
2、Webpack打包核心流程？
打包核心流程：
- 入口处理
- 从entry文件开始，启动编译流程
- 依赖解析
- 从entry文件开始，根据require or import等语句找到依赖资源
- 资源解析
- 根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
- 资源合并打包
- 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
- 递归调用2、3，直到所有资源处理完毕
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、 CoffeeScript方言
- 统一图片、CSS、字体等其他资源的处理模型
- Etc……
3、如何使用Webpack
关于webpack使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
使用webpack
- 使用webpack——处理css
- 使用webpack——接入babel
- 使用webpack——生成HTML
- 使用webpack——hmr
- 使用webpack——tree-shaking
- 使用webpack——工具栈
什么是Loader
- 为了处理非标准JS资源，设计出资源翻译模块————Loader
- 作用：将资源转换成标准JS
- 使用：安装Loader、添加‘module’处理css文件。
- 特点：
链式执行
支持异步执行
分normal、pitch两种模式
进阶:理解插件
- 很多知名工具，如VS Code、Web Storm、Chrome、Firefox等等，都设计了所谓“插件”架构，为什么?
- 新人需要了解整个流程细节，上手成本高。功能迭代成本高，牵一发动全身。功能僵化，作为开源项目而言缺乏成长性。
- 插件架构精髓:对扩展开放，对修改封闭。
- 甚至，Webpack 本身的很多功能也是基于插件实现的。
钩子的核心信息
- 1.时机: 编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情
- 2.上下文: 通过 tapable 提供的回调机制，以参数方式传递上下文信息
- 3.交互：在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接口改变
小结
通过今天的学习，我了解了很多关于Webpack打包工具的知识。
我知道了Webpack之所以诞生和他用于解决的痛点问题。
同时学习了如何使用Webpack进行打包。
