## 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)
```
