这是我参与「第五届青训营」伴学笔记创作活动的第15天
一、什么是Webpack
本质上Webpack是一种前端资源编译、打包工具，是现代JS应用程序的静态模块打包器。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
二、使用Webpack
安装->编辑配置文件->执行编译命令
核心流程：
- 入口处理（从
entry文件开始，启动编译流程） - 依赖解析（从
entry文件开始，根据requireorimport等语句找到依赖资源） - 资源解析（根据
module配置，调用资源转移器，将png、Css等非标准JS资源转译为JS内容） - 资源合并打包（将转译后的资源内容合并打包为可直接在浏览器运行的JS文件）
- 递归调用2、3步，直到所有资源处理完毕
配置大致可分为两类：
- 流程类：作用域流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
场景：
- 处理CSS
- 接入Babel
- 生成HTML
- 工具线
- HMR
三、理解Loader
为了处理非标准JS资源，设计出资源翻译模块——Loader，用于将资源翻译为标准JS
步骤：
- 安装Loader
- 添加
module处理CSS文件
特性：
- 链式调用
- less-loader：实现less => css的转换
- css-loader：将CSS包装成类似module.exports = "${css}"的内容，包装后的内容符合JavaScript 语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
常见Loader
四、理解插件（plugin）
插件架构精髓：对扩展开放，对修改封闭
插件围绕‘钩子’展开
钩子的核心信息：
- 时机：编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情
- 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
- 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
五、Webpack学习方法
知识点：
六、课后总结
本章节学习了Webpack知识体系的相关知识，通过对webpack的定义、打包流程、Loader的使用、Plugin的使用等方面的学习，更加深入了解了webpack的知识技能，对日后的前端学习之路有很大的帮助。
