其实 clean-webpack-plugin 很容易知道它的作用，就是来清除文件的。

一般这个插件是配合 webpack -p 这条命令来使用，就是说在为生产环境编译文件的时候，先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的。

1. 为什么要用 clean-webpack-plugin

如果还不理解为什么要用它，就看看下面的例子就可以知道的。

webpack.config.js

const path = require('path')
...

module.exports = {
  entry: {
    "app.bundle": './src'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  ...

};

在终端上运行：

$ npm run build

image

看看 dist 目录：

dist
├── app.bundle.e56abf8d6e5742c78c4b.js
├── index.html
└── style.css

你再把 src/index.js 改改内容，然后再执行 npm run build。

image

再多运行几次，生成的带 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 HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件html-webpack-plugin
// const ExtractTextPlugin = require('extract-text-webpack-plugin');//引入插件extract-text-webpack-plugin
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");//引入插件mini-css-extract-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin'); //引入清除文件插件

module.exports = {
  entry: {
    'app.bundle':'./src'
  },//输入文件路径 entry 的默认值是 ./src 
  output: {
    path: __dirname + '/dist', //output.path 的默认值是 ./dist　path:对应一个绝对路径，此路径是希望一次性打包的目录
    //修改为hash模式
    filename: '[name].[chunkhash].js'//能指定出口文件中同样的filename名称　filename:编译文件的文件名，首选推荐：main.js||bundle.js||index.js
  },
  devServer: {
    port: 9000,
    open: true
  },

  // 由于plugin可以携带参数/选项，必须在wepback配置中，向plugins属性传入new实例
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',//根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader， 否则webpack不能正确解析
      filename: 'index.html',// 默认情况下生成的 html 文件叫 index.html
      minify: {
        collapseWhitespace: true, //把生成的 index.html 文件的内容的没用空格去掉，减少空间
      },
      hash: true, //为了更好的 cache，可以在文件名后加个 hash。
    }),
    // new ExtractTextPlugin('style.css') //实例ExtractTextPlugin，4.0弃用
    // new MiniCssExtractPlugin({//实例MiniCssExtractPlugin
    //   // Options similar to the same options in webpackOptions.output
    //   // both options are optional
    //   filename: "style.css",
    //   chunkFilename: "app.scss"
    // })
    new CleanWebpackPlugin(['dist']),//实例化，参数为目录
  ],
  module: {
    rules: [
      {
        test: /\.scss$/, //正则验证格式

        use: [ 'style-loader', 'css-loader', 'sass-loader' ] //安装的loader

        // ExtractTextPlugin 4.0弃用
        // use: ExtractTextPlugin.extract({
        //   fallback: 'style-loader',
        //   //resolve-url-loader may be chained before sass-loader if necessary
        //   use: ['css-loader', 'sass-loader']
        // })

        // MiniCssExtractPlugin
        // use: [
        //   // MiniCssExtractPlugin.loader,
        //   "css-loader",
        //   'sass-loader'
        // ]
      }
    ]
  },
};

现在运行 npm run build 试试，只有下面的文件：

dist
├── app.bundle.0e380cea371d050137cd.js
├── index.html
└── style.css