# 9. 用 clean-webpack-plugin 來清除文件 其實 [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin) 很容易知道它的作用，就是來清除文件的。 一般這個插件是配合 `webpack -p` 這條命令來使用，就是說在為生產環境編譯文件的時候，先把 `build或dist` (就是放生產環境用的文件) 目錄里的文件先清除干凈，再生成新的。 ## 1. 為什么要用 clean-webpack-plugin 如果還不理解為什么要用它，就看看下面的例子就可以知道的。 **webpack.config.js** ``` const path = require('path') ... module.exports = { entry: { "app.bundle": './src/app.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js' }, ... }; ``` 在終端上運行： ``` $ npm run prod ```  看看 `dist` 目錄： ``` dist ├── app.bundle.e56abf8d6e5742c78c4b.js ├── index.html └── style.css ``` 你再把 `src/app.js` 改改內容，然后再執行 `npm run prod`。  再多運行幾次，生成的帶 hash 的 `app.bundle.js` 文件就會很多。 ``` dist ├── app.bundle.0e380cea371d050137cd.js ├── app.bundle.259c34c1603489ef3572.js ├── app.bundle.e56abf8d6e5742c78c4b.js ├── index.html └── style.css ``` 這些帶 hash 的 `app.bundle.js` 只有最新的才有用，其他的都沒用，我們要在 build 之前把它們全清空，這真是 clean-webpack-plugin 發揮的作用。 ## 2. 使用 clean-webpack-plugin 首先來安裝。 ``` $ npm i clean-webpack-plugin --save-dev ``` **webpack.config.js** ``` const path = require('path') ... const CleanWebpackPlugin = require('clean-webpack-plugin'); let pathsToClean = [ 'dist', ] module.exports = { entry: { "app.bundle": './src/app.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js' }, ... plugins: [ new CleanWebpackPlugin(pathsToClean), ... new ExtractTextPlugin('style.css') ], ... }; ``` 現在運行 `npm run prod` 試試，只有下面的文件： ``` dist ├── app.bundle.0e380cea371d050137cd.js ├── index.html └── style.css ``` 先到這里。