## CleanWebpackPlugin
大家可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。
clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。
npm: https://www.npmjs.com/package/clean-webpack-plugin
```
yarn add clean-webpack-plugin --dev
```
在 `conf/webpack.config.js` 中配置:
```js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].bundle.js'
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '..'),
exclude: [],
verbose: true,
dry: false
}),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
};
```
注意，由于此配置文件位于 conf 目录下，需要配置 CleanWebpackPlugin 的配置选项，将 root 配置为项目根目录。
CleanWebpackPlugin 插件的调用格式:
```js
new CleanWebpackPlugin(paths [, {options}])
```
其中:
- paths 是一个路径数组，用于设置要清除的文件路径
- options 是一个配置选项，可选填
- root 文件路径根，默认为当前目录
- exclude 排除的文件
- verbose
- dry
比如:
```js
let pathsToClean = [
'dist',
'build'
]
let cleanOptions = {
root: '/full/webpack/root/path',
exclude: ['shared.js'],
verbose: true,
dry: false
}
new CleanWebpackPlugin(pathsToClean, cleanOptions)
```
