clean-webpack-plugin

一、clean-webpack-plugin 介绍

clean-webpack-plugin是一个清除文件的插件。在每次打包后，磁盘空间会存有打包后的资源，在再次打包的时候，我们需要先把本地已有的打包后的资源清空，来减少它们对磁盘空间的占用。插件clean-webpack-plugin就可以帮我们做这个事情。

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack4-1例子

二、安装 clean-webpack-plugin

我们安装Webpack以及插件clean-webpack-plugin

    npm install --save-dev webpack@4.46.0  webpack-cli@3.3.12    
    npm install --save-dev clean-webpack-plugin@3.0.0  

三、使用 clean-webpack-plugin

我们的Webpack配置文件如下，两个JS文件，a.js是入口文件，它使用import('./b.js')引入了b.js模块。

webpack.config.js

  var path = require('path');
  var { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      // filename: 'bundle2.js',
    },
    plugins:[
      new CleanWebpackPlugin()    
    ],
    mode: 'none'
  };

在使用该插件的时候，我们首先通过require('clean-webpack-plugin')引入该插件，接着在plugins配置项里配置该插件。配置该插件的时候通过 new CleanWebpackPlugin()就完成配置了，我们不传入任何参数，该插件会默认使用output.path目录作为需要清空的目录，会把该目录下的所有文件目录以及文件都清除。

我们执行npx webpack完成打包，dist目录里有bundle.js和1.bundle.js两个文件。
接着我们把Webpack的输出文件名output.filename改成bundle2.js，再次执行npx webpack，会output.path路径目录里的文件清空进行打包。

打包完成后观察dist目录，我们发现dist目录里的bundle.js和1.bundle.js这两个文件不见了，新增加了bundle2.js和1.bundle2.js。这就是clean-webpack-plugin的作用，它把dist之前的内容清空，然后打包重新生成了新文件。

插件clean-webpack-plugin也支持传入参数进行单独配置，具体可以参阅其文档https://github.com/johnagan/clean-webpack-plugin，实际使用中我们很少对其进行单独配置

小结

本节主要讲了clean-webpack-plugin的使用，它在我们实际开发中使用的频率非常高。我们通过这个简单的例子，学会插件的基本使用方法。