02 webpack 插件Plugin

loader只是用来加载某些模块的，但我们的一些其他需求他是完成不了的，比如每次打包前把之前打包文件删除。。。等

我们可以使用插件Plugin来完成，Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

CleanWebpackPlugin

每次修改了一些配置，重新打包时，都需要手动删除dist文件夹： 我们可以借助于一个插件CleanWebpackPlugin；

先安装 npm install clean-webpack-plugin -D

在webpack.config.js中配置

因为是社区提供的插件，每个插件导出的不一样，有的直接导出的类，有的是对象，包裹类

plugins里放一个个对象

HtmlWebpackPlugin

我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。 在进行项目部署的时，必然也是需要有对应的入口文件index.html； 所以我们也需要对index.html进行打包处理；

安装 npm install html-webpack-plugin -D

 现在自动在dist文件夹中，生成了一个index.html的文件

如果我们想在自己的模块中加入一些比较特别的内容，比如供vue,react挂载的div

 我们需要一个自己的index.html

 DefinePlugin

上面我们用到了一个常量，但是没有定义，会报错

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

 CopyWebpackPlugin

在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。 这个复制的功能，我们可以使用CopyWebpackPlugin来完成

Mode配置 

Mode配置选项，可以告知webpack使用响应模式的内置优化