本节课将解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识，同时本节课将主要带来 Webpack 的使用方法，帮助同学从理论到实践，能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法。
学习Webpack的目的：
理解前端“工程化”概念、工具、目标；
一个团队总要有几个人熟悉Webpack，某种程度上可以形成自己的核心竞争力；
高阶前端必经之路；
Webpack的定义：
Webpack本质上就是一种前端资源编译、打包工具；
前端项目由什么构成—资源：
PNG,JPG,GIF,JS,TS等；
也可以手动管理一些资源；
但是依赖手工操作，过程繁琐，且比较容易出错；
当代码之间有依赖的时候，就需要严格按依赖顺序开发；
开发与生产环境一致时，难以接入TS或JS等新特性；
比较难接入LESS、SESS等工具；
JS、图片、CSS资源管理模型不一致；
出现很多工程化的工具：
Webpack、VITE、ROLLUP.JS等；
使用Webpack
安装Webpack依赖、编辑配置文件、执行编译命令；
使用Webpack打包，将多个资源合并为同一个资源，方便多次使用；
核心流程—极度简化
1入口处理：
从“entry”文件开始，自动编译流程；
2依赖解析：
从“entry”文件开始，根据“require”or“import”等语句找到依赖资源；
3资源解析：
根据“module”配置，调用资源转移器，将png、css等非标准JS资源转译成JS内容；
4资源合并打包：
将转译后的资源内容合并打包成为可以直接在浏览器中运行的JS文件；
需要注意：在实际运行中，会存在递归调用2，3，直到所有资源处理完毕；
模块化+一致性：
多个文件资源合并，减少请求；
支持模块化开发；
支持高级JS特性；
支持TS、CS等官方语言；
统一图片、CSS、字体等其他资源的处理模型；
使用Webpack：
基于“配置”层面进行展开，这些配置大致可分为两类：
流程类：作为流程中某个或若干个环节，直接影响打包效果的配置顶；
工具类：主流程之外，提供更多工程化能力的配置顶；
流程类配置：
输入—模块解析—模块转译—后处理（输出）；
HMR—模块热替换
代码更改立即在浏览器中实时呈现；
实现核心在于配置Webpack server--devServer；
Tree-shaking:
代码未被使用，不可到达；
用于对定义了但是未使用的代码进行删除；
对工具类库如Lodash有奇效；
其他工具：
缓存、Sourcemap、性能监控、日志、代码压缩、分包等。
