webpack 插件（plugins）

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

根据你的 webpack 用法，这里有多种方式使用插件。

一、根据HTML模板自动生成HTML文件（html-webpack-plugin）

1.

HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。

我们之前写的index.html文件是自己手动写入build文件中的，现在我们可以使用插件自动生成HTML文件

根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里

2.安装依赖：

命令：npm install html-webpack-plugin --save-dev

3.配置config文件

4.在public文件夹下建立index.html文件，打包

二、webpack提取分离css单独打包

1.处理效果

将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的 CSS 文件

2.ExtractTextPlugin插件

（1）安装命令：npm install --save-dev extract-text-webpack-plugin@next

（2）配置config文件

引入插件

（3）Rules设置：

fallback:编译后用什么loader来提取css文件

（4）Plugins设置

3.mini-css-extract-plugin插件

（1）安装命令：npm install --save-dev mini-css-extract-plugin

（2）引入插件

（3）Rules设置

（4）Plugins设置

打包：

三、运用webpack插件拷贝静态文件

1.处理效果

2.安装

命令：npm install --save-dev copy-webpack-plugin

3.配置config文件

4.打包

四、webpack插件clean-webpack-plugin清除文件

1.处理效果

当我们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并没有删除。

为了解决这种情况，我们可以使用clean-webpack-plugin在打包之前将文件先清除，之后再打包出最新的文件

2.安装

命令：npm install --save-dev clean-webpack-plugin

3.配置config文件

注意：clean-webpack-plugin 2.0版本需改成以下配置

dry是否模拟删除文件，true是模拟删除，不会移除文件，false会移除文件再重新创建