loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new操作符来创建它的一个实例。
这里我们只简单地讲几个插件。
1.HtmlWebpackPlugin
这个插件非常有用，它会生成一个html文件，并将打包后的文件添加到进去，也就省去了我们手动去创建去添加，特别是我们打包的文件名可能经常会更改，这时这个插件就会非常有用。
现在我们来简单演示一遍：
首先安装该插件：npm install --save-dev html-webpack-plugin
在webpack.config.js中进行配置，添加plugins属性如下：
plugins: [
new HtmlWebpackPlugin({
title: 'yaodebian',
filename: 'index.html',
template: './src/index.html',
inject: true
})
]
当然别忘了在文件开头对该插件进行引入：const HtmlWebpackPlugin = require('html-webpack-plugin');
上面我进行了某些配置：title、filename、template、inject
title: 其实就是html文件中title标签的内容，上面的title配置其实会被template中指定的html文件配置。在没有配置template属性时，自动生成的html文件的title标签字段就是该title属性的值。
filename: 指定生成的html文件的位置，其相对于出口目录而定；
template: 模板就是用来copy的，该属性就是指定一个html文件作为将会生成的html文件的模板，相对于webpack配置文件目录而言，它的作用就是生成的文件内容将会在template指定的文件内容基础上再将打包后的bundle.js文件添加进去组合成一个新的html文件。
- inject: 它有四个值true、body、head、false
- true 默认值，script标签位于html文件的 body 底部
- body script标签位于html文件的 body 底部
- head script标签位于html文件的 head中
- false 不插入生成的js文件，这个几乎不会用到的
废话不多说，举个栗子：
像上面配置中，我是在src目录下添加了一个index.html并作为模板，index.html中的内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack_all</title>
</head>
<body>
<p class="hello">hello world</p>
<img src="./Hydrangeas.jpg" alt="">
</body>
</html>
我们再来打包一下，结果可以看到dist目录下生成了一个新的index.html覆盖了之前的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack_all</title>
</head>
<body>
<p class="hello">hello world</p>
<img src="./Hydrangeas.jpg" alt="">
<script type="text/javascript" src="bundle.js"></script></body>
</html>
看到了吧，就是将我们的模板添加上打包后的bundle.js文件，这样我们就不用自己创建html文件并手动插入script。
不过有一个问题，这其实就是我们之前在讲loader的时候讲的那个问题，用file-loader引入的一张图片，并会在出口目录下会生成一张以图片内容的MD5哈希值命名的图片。这个时候我们要在html文件中通过img标签来引用与呈现这张图片时就需要手动更改标签中src属性中图片的名字。我们想要让它自动更改应该要怎么实现呢？
自己在网上搜索了下，找到一个国人写的loader: html-withimg-loader
首先，我们安装该loader：npm install --save-dev html-withimg-loader，然后我们在webpack.config.js添加如下配置：
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
最后在入口的js文件中引入我们作为html-webpack-plugin模板的html文件：
import './index.html'
这个时候我们进行打包，产生的index.html文件如下：
dist/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack_all</title>
</head>
<body>
<p class="hello">hello world</p>
<img src="bdf3bf1da3405725be763540d6601144.jpg" alt="">
<script type="text/javascript" src="bundle.js"></script></body>
</html>
我们看下dist目录下的文件结构：
看到了吧，这个时候img标签的图片名就和打包后的图片是一样的了。
不过，这个loader在平时应该不怎么会去用，这里只是针对之前遇到的问题使用这个loader。
2.clean-webpack-plugin
你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们/dist文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。
上面两段是官方的原话，可能有些小伙伴不理解。通俗的讲，假如我们dist目录下有一个hello.js文件，但是我们打包生成的文件中没有这个文件，那打包之后这个文件就是多余的，我们根本不会用到，所以我们需要通过某些手段在打包之前将dist目录清空。这里，我们用到了clean-webpack-plugin。
安装该插件：npm install --save-dev clean-webpack-plugin
在webpack.config.js文件中进行如下配置：
添加插件声明：const CleanWebpackPlugin = require('clean-webpack-plugin');
使用插件：new CleanWebpackPlugin(['dist'])
上面初始化插件配置时传入的参数就是包含了要清空的目录的数组，详细的配置可以去官网查看。
为了验证插件的效果，我们先在dist目录下创建一个hello.js的文件：
最后我们再进行打包：npm run build
结果如下：
说明插件已经生效了！！！
对于上面的应用，官方提出了一个叫做Manifest的概念：
这里就不赘述，小菜我也还没研究过，希望之后找个时间再另外单独研究并总结一下。同样也希望各位小伙伴或大大分享相关方面的知识或文章哦！！！
