一、clean-webpack-plugin

1.1 插件定位

首先对于webpack的扩展来说，基本上都是在loader加载器或者是plugins就是插件上面的扩展。
上面的插件就是npm的一个包，导入之后，在webpack-config-js导入，实例化之后放入插件数组即可。
功能：就是方便了我们每次打包的时候都需要手动删除之前的js文件，由于在node环境下面运行，所以在安装之后可以直接在npx webpack之后就搭建好目录。

1.2 插件的如何使用

1. 不用想，查官方文档 链接
2. 安装完成之后…….
3. 直接配置

4. 嘎嘎使用，修改完成之后，直接npx webpack，最后我们的目录就非常干净。

   二、html-webpack-plugin

   2.1 插件的简介

   
   顾名思义，这个插件的功能就是为我们生成页面的，在引用实例之后，在构造函数的参数中，我们可以配置一个对象，里面写我们想配置的内容，比如说：模板，html文件名称，到底这个html引用的是哪一个js chunk。简单来说，就是自动生成我们想要的页面，自动引用相对应的js。

   2.2 插件的简单使用

5. npm 初始化 npm init -y

6. npm导入开发环境依赖 npm i -D
7. 在webpack.config.js配置想要的参数。

   2.3 实际应用和细节解释

   
   
   
   
   
   

三、copy-webpack-plugin

3.1 插件的简介

顾名思义，这个插件就是一个复制静态资源的插件（这个静态资源是写死了的，不是通过js动态生成的）。
这个插件可以帮助我们赋值想要的静态资源到dist目录下面。

3.2 基本场景和使用

假设我们现在需要把模板html中的img文件下面的所有图片在我们打包的时候也同时过去，这个时候就利用到了这个插件。

1. 还是进行npm初始化以及第三方库的安装，安装过后进行配置。

四、开发过程中使用的服务器—webpack-dev-server

4.1 插件简介

这个插件是什么？这个插件有什么用？
这个插件就是方便我们在开发过程中频繁的修改代码，查看效果，以及向真实的模拟在服务器部署下面的一个webpack官方推出的一个开发阶段的服务器模拟的插件。
这个插件究竟怎么去使用呢？
（如果可能的话，提前写好package.json文件以及webpack.config.js文件），然后npm初始化，安装第三方库之后，直接npm run dev就可以（实际上是 npx webpack-dev-server，但是我已经提前进行了脚本的书写。），下面4.2就让我们真实的进行使用并且介绍里面的一些细节点。

4.2 插件的简单使用

package.json 以及 webpack.config.js



results