-
初识Plugin
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
-
CleanWebpackPlugin
如果没有安装任何插件的情况下如果我们执行build指令必须手动删除上一次打包的资源，如果不删除上一次打包的资源文件有可能被遗留下来（比如上一次有一张图片，这次打包这张图片被删除了，那么就会被遗留如下图：）
所以每次打包都需要手动删除一下上一次打包的文件。
CleanWebpackPlugin可以帮助我们打包之前自动删除对应的文件- 安装
yarn add clean-webpack-plugin -D - 配置
- 打包结果
- 安装
-
HtmlWebpackPlugin
如果要对项目进行部署的话一定要有一个入口文件也就是index.html,但是此时打包文件夹中是没有这个文件的，我们可以手动添加一个index.html，也可以通过HtmlWebpackPlugin帮我们自动生成一个index.html- 安装
yarn add html-webpack-plugin -D - 配置
- 打包结果
该文件是通过一个模板生成的文件模板文件在源码中如下图：
我们可以自定义模板其中会有一些语法
<% 变量 %>这个是EJS模块填充数据的方式打包结果：
- 安装
-
DefinePlugin
帮助我们在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）。 如上添加模板的时候此时我们添加一个favicon.ico如下图
此时打包会报错：
提示找不到
BASE_URL的定义，此时就可以配置一个全局常量如下图: -
CopyWebpackPlugin
上文中使用DefinePlugin解决了打包报错的问题，但是运行起来发现图表并没有显示如下图原因很简单，先看打包后的
index.html文件他是在当前文件夹下找图标文件，但是打包的文件中并没有吧对应的图标文件复制进来，此时可以使用
CopyWebpackPlugin插件将制定文件夹的文件全部复制进来。- 安装
yarn add copy-webpack-plugin -D - 配置
- 所有复制的规则添加到
patterns中，该参数的值对应的是个数组可以添加多条 - 每个复制规则又包含如下参数
from、to、glocOptionsfrom:从那个文件夹开始赋值to: 复制到那个位置，不设置默认复制到打包目录下glocOptions：设置一些额外的选项，比如index.html不需要再复制应为HtmlWebpackPlugin已经生成了对应的文件了 具体配置如下：此时在打包如下图：
发现仅仅复制了图标文件其他两个文件没有复制过来，然后再看运行结果
- 所有复制的规则添加到
- 安装
