plugin跟loader有什么区别呢？
我们通过前面写的loader可以看出，loader是为来处理各种各样的文件而存在的，可以简单理解为他把浏览器不能识别的文件转换成能识别的文件，比如jsx，less，ts等。
plugin有点像钩子函数，他是贯穿webpack打包的全过程的。什么时候需要他他就能用。就比如我们前面每次打包之前都要手动删除dist目录，这个就可以交给插件完成。
接下来我们就举例应用插件吧！
1.使用clean-webpack-plugin，这个插件就是可以删除文件夹的。
首先安装 yarn add clean-webpack-plugin --dev，然后在webpack.config.js中引入。
我们在
build的文件夹下添加随便添加一个文件（test.txt），然后在执行一次npm run build，发现build文件夹下的test.txt就被删除了，说明clean-webpack-plugin已经工作了。
2.使用html-webpack-plugin，这个插件可以让我们使用html的模版将它生成到build文件夹下。
首先安装 yarn add html-webpack-plugin --dev，然后在webpack.config.js中引入。
我们定义一个模版，这个模版可以使用
ejs语法，动态插入数据
// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>我是模版</h1>
</body>
</html>
然后我们可以把src下的index.html删除了，之后在运行npm run build，发现build文件夹下自动生成了index.html，且里面的内容都已经被替换了。
3.使用Defineplugin，这是webpack内置的插件，可以在全局配置常量。记住字符串是单引号套双引号。
在重新运行打包，发现数据就更新了！
4.使用copy-webpack-plugin,他可以copy我们不需要处理的静态文件。
首先安装 yarn add copy-webpack-plugin，然后在webpack.config.js中引入。在public文件夹下添加一个小图标（随便添加个文件都行，这个还挺重要的，不添加后面打包就会出错）
// webpack.config.js
// ignore忽略文件，因为在前面应用html-webpack.plugin时已经把index.html拷贝到build文件夹下了
new CopyWebpackPlugin({
patterns: [
{
from: 'public',
globOptions: {
ignore: ['**/index.html']
}
}
],
})
