相对于webpack4，webpack5内置了很多plugin插件，比如、打包、压缩、缓存
代码压缩
webpack5对模块的合并、作用域提升
模块联邦
无需本地下载依赖，让代码直接cdn共享，直接构建项目
打包缓存优化
webpack4需要使用cache-loader打包结果来优化之后的打包性能
webpack5默认就开启了打包缓存（官方文档），无需再安装cache-loader
服务启动
文件处理模块
- webpack4中打包文件，需要安装url-load、file-load
- webpack5内置asset模块，打包文件无需配置
自定义plugin
Webpack 插件就像是你的助手，可以按照要求在构建过程中执行各种任务，例如处理文件、优化资源等。
原理
webpack宛如一条生成线，需经过一系列流程后将源文件输出结果，每个流程都是单一的，依次执行流程，多个流程之间有依赖关系，plugin是插入生成线中的功能，在指定时机对生成线的文件做处理。
Webpack 是一座大厦，插件是大厦里的工人。
用一个简单的比喻来解释插件的工作原理：
- 大厦的构建过程：大厦的建造需要经历多个阶段，从打地基、搭建框架到最终竣工。Webpack 也有类似的构建过程，包括解析模块、编译代码、生成输出文件等。
- 大厦里的工人（插件）：插件就像大厦里的工人，他们拥有各种技能和工具，可以在不同的施工阶段做出贡献，完成各种任务。
- 工人与施工阶段的关联：每个工人在施工过程中有自己的职责和任务，依靠他们的技能来完成不同的工作。类似地，Webpack 插件也与构建过程中的不同阶段相对应，每个插件在特定的时机执行自己的任务。
- 工人的任务与插件的工作逻辑：工人们根据施工计划在特定的时间点完成自己的任务，例如安装管道、涂刷墙壁等。Webpack 插件也有类似的逻辑，它们在特定的构建阶段（如文件解析、代码编译、资源生成）执行自己的功能，例如处理文件、优化代码等。
- 工人与整个大厦的关系： 每个工人负责自己的任务，并相互协作来建造整个大厦。Webpack 插件也与整个构建过程相互协作，通过与其他插件和 Webpack 的集成，共同完成项目的构建工作。
归纳为以下几个步骤：
- 安装和配置插件：首先，你需要通过 npm 或 yarn 安装所需的插件，并将它们添加到 webpack.config.js 配置文件中的plugins数组中。
- 初始化插件实例：在配置文件中，你需要创建插件的实例对象，并传递任何必要的选项或参数。这将创建插件的一个实例，以便在构建过程中使用。
- 定义插件的钩子函数：插件会定义一些特定的钩子函数，用于在构建过程的不同阶段执行任务。Webpack 提供了一系列的钩子函数，如beforeRun、compilation、optimize、emit等。你需要根据需求选择合适的钩子函数，并在插件实例上实现这些钩子函数。
- 编写插件逻辑：在钩子函数中，你可以编写插件的逻辑来实现所需的功能。这可以是文件处理、资源优化、代码生成、依赖分析等任何自定义任务。你可以访问构建过程中的各个对象，如编译器（compiler）和编译（compilation），以获取有关构建状态和资源的信息。
- 与构建过程交互：插件可以通过调用特定的钩子函数，与构建过程的不同阶段进行交互。例如，在beforeRun钩子函数中，可以执行一些准备工作；在compilation钩子函数中，可以分析编译过程中的模块和依赖；在emit钩子函数中，可以进行代码生成和资源输出等操作。
- 处理构建结果： 插件可以根据自己的需求，修改或添加构建结果。例如，可以向输出的文件中插入特定的代码块，对生成的资源进行优化，生成额外的构建报告等。
