1. 写在前面
在前面的博客中我们说过，webpack之所以有这么强大的功能，是因为它借助了很多 loader 和 插件 的帮助。在之前webpack配置中，我们已经介绍了很多 loader 和 插件 ，在这里再介绍三种小插件，可以帮助我们更好地使用webpack构建项目。
这三款插件分别是：CleanWebpackPlugin、CopyWebpackPlugin、BannerPlugin(webpack内置插件)。下面一一对这些插件进行介绍。
2. CleanWebpackPlugin
该插件的作用是：每次进行 build 的时候，将之前的dist目录下的代码清除，然后再打包生成新的代码文件。
当我们在使用 build 命令进行打包编译项目的时候，webpack会根据配置信息，将打包编译好的项目输出到一个文件夹中(默认文件夹是dist) 。在项目的开发过程中，我们肯定会多次执行 build 命令，这个时候我们希望每次执行 build 命令的时候，都可以将之前打包生成的代码文件删除，然后生成最新的代码文件。
但是实际情况却是之前的代码不会删除，比如：第一次打包编译项目，生成了a.js文件，第二次打包编译项目，生成了b.js文件。这个时候，a.js文件使用不到的，但该文件还是会存在dist文件夹下，这是我们不愿意看到的。
这里我们可以借助CleanWebpackPlugin插件进行删除之前的文件，首先执行以下命令进行安装插件：
yarn add clean-webpack-plugin -D
安装完成之后，在 webpack.config.js 文件中书写以下代码进行配置：
let CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
/* 节省篇幅，其余配置已省略 */
plugins: [
new CleanWebpackPlugin([
'./dist' // 指定你要清楚文件的目录，可以传入多个目录参数
])
]
}
这里将其他的配置规则省略了，如果你想看其他的配置规则，可以查看我的 GitHub仓库 - webpack-learning ,或者通过本文末尾的链接，跳转到我之前的博客中进行查看。
3.CopyWebpackPlugin
该插件的作用是：在每次进行 build 的时候，将某些静态资源复制到特定文件夹下。
比如将一些特定的Excel文件，拷贝到dist 目录下，可以借助这款插件的帮助。使用这款插件，首先要执行以下命令进行安装：
yarn add copy-webpack-plugin -D
配置代码也是非常简单，直接在 webpack.config.js 文件中书写以下代码：
let CopyWebpackPlugin = require('copy-webpack-plugin')
modules.export = {
/* 节省篇幅，其余配置已省略 */
plugins: [
new CopyWebpackPlugin([
// 参数是数组，可以对多个位置的文件进行copy
{ from: './doc', to: './dist' }
])
]
}
这里需要说明的是，这里的 from 和 to 属性根据自己的实际情况进行配置。
4. BannerPlugin(webpack内置插件)
这是一款webpack的内置插件，作用是：代码版权声明插件，在编译好的 .js 文件的头部插入我们指定的版权声明文字，起到版权声明的作用。
既然是webpack内置插件，所以我们不用额外进行安装，可以直接进行在 webpack.config.js 文件中进行配置，示例代码如下：
let webpack = require('wepack');
modules.export = {
plugins: [
// 参数是你要一个字符串，值是你要添加的版权声明信息
new webpack.BannerPlugin('Made by Allen Feng')
]
}
配置完成之后，再次进行打包编译项目，就可以在生成的 .js 文件中看到我们的版权信息：
/*! Made by Allen Feng */!function(e){var n={};function t(r){if(n[r])return n[r]......
5. 写在最后
以上便是这三款小插件，可以帮助我们更好的使用webpack构建项目。
