How to use the clean-webpack-plugin.CleanWebpackPlugin function in clean-webpack-plugin

/* eslint-disable import/no-extraneous-dependencies */
import webpack from 'webpack';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import CompressionPlugin from 'compression-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import Visualizer from 'webpack-visualizer-plugin';
import dotenv from 'dotenv';
import merge from 'webpack-merge';
import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
import CrittersWebpackPlugin from 'critters-webpack-plugin';

import common from './webpack.common.babel';

const cleanerPlugin = new CleanWebpackPlugin();
const optimizeCSSPlugin = new OptimizeCssAssetsPlugin({});
const momentLocalesPlugin = new MomentLocalesPlugin();
const crittersWebpackPlugin = new CrittersWebpackPlugin();

const terserPlugin = new TerserPlugin({
  cache: true,
  parallel: true,
  sourceMap: true
});

const compressionPlugin = new CompressionPlugin({
  algorithm: 'gzip',
  test: /\.js$|\.css$|\.html$/,
  threshold: 10240,
  minRatio: 0.8
});

//       enforce: true,
    //       reuseExistingChunk: true,
    //     }
    //   }
    // },
  }
}

if (isProduction) {
  config.output.filename = '[name].[hash:8].js'
  config.optimization.minimizer = [
    new TerserPlugin({ extractComments: false }),
    new OptimizeCSSAssetsPlugin({})
  ]
  config.plugins.push(
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['app.*.css', 'app.*.js', 'app.*.js.map']
    }),
    new MiniCssExtractPlugin({ filename: '[name].[hash:8].css' }),
    new webpack.IgnorePlugin(/redux-logger/),
    new HtmlWebpackPlugin({
      template: 'public/template.html',
      inject: false,
      filename: 'mainnet.html',
      network: 'mainnet',
      metaMask: true
    }),
    new HtmlWebpackPlugin({
      template: 'public/template.html',
      inject: false,
      filename: 'kovan.html',
      network: 'kovanTst',

return (env, argv) => {
    const plugins = [
      new MiniCssExtractPlugin({
        filename: `css/${styleName}.css`,
      }),
      new CleanWebpackPlugin({
        // We cleanup the superfluous js/grid.js since we don't build JavaScript modules for grid.css
        cleanOnceBeforeBuildPatterns: [], // Disables cleanOnceBeforeBuildPatterns since it's specified on its own below
        cleanAfterEveryBuildPatterns: ['js/grid.js'],
      }),
    ];
    if (shouldClean) {
      plugins.push(new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: ['**/*', '!images', '!dev', '!images/**', '!dev/**'],
      }));
      shouldClean = false;
    }

    const isEnvDevelopment = argv.mode === 'development';
    const isEnvProduction = argv.mode === 'production';

    const resourcesPath = './bundle/Resources';
    const buildPath = isEnvProduction ? 'public' : 'public/dev';

    const getStyleLoaders = (cssOptions, preProcessor) => {
      const loaders = [
        isEnvDevelopment && require.resolve('style-loader'),
        {
          loader: MiniCssExtractPlugin.loader,

Prepack是JavaScript的部分评估程序。Prepack重写了一个JavaScript包，从而使JavaScript代码更有效地执行。对于初始化繁重的代码，Prepack在有效缓存JavaScript解析的环境中工作得最好。
prepack-webpack-plugin
Travis build status Coveralls NPM version Canonical Code Style

A webpack plugin for prepack.
    https://github.com/gajus/prepack-webpack-plugin
    https://prepack.io/
    预包装
一种使JavaScript代码运行得更快的工具。
* Prepack仍处于早期开发阶段，尚未准备好用于生产。请尝试一下，提供反馈，并帮助修复错误。 */
    // new HtmlWebpackPlugin({
    //   title: " Progressive Web Application"
    // }),
    isEnvDevelopment && new webpack.NamedModulesPlugin(),
    // new webpack.HotModuleReplacementPlugin(),
    isEnvProduction && new CleanWebpackPlugin(),
    isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),

    isEnvProduction &&
      new WorkboxWebpackPlugin.GenerateSW({
        clientsClaim: true,
        // exclude: [/\.map$/, /asset-manifest\.json$/],
        importWorkboxFrom: "cdn"
        // navigateFallback: publicUrl + "/index.html",
        // navigateFallbackBlacklist: [
        //   // Exclude URLs starting with /_, as they're likely an API call
        //   new RegExp("^/_"),
        //   // Exclude URLs containing a dot, as they're likely a resource in
        //   // public/ and not a SPA route
        //   new RegExp("/[^/]+\\.[^/]+$")
        // ]
      }),

export function plugins(configOptions: ConfigOptions): webpack.Plugin[] {
  const plugins = [
    new CleanWebpackPlugin(),
    new UnusedWebpackPlugin({
                              directories: [
                                path.join(configOptions.railsRoot, "webpack"),
                                path.join(configOptions.railsRoot, "spec", "webpack")
                              ],
                              exclude: ["config/**/*.*", "*.d.ts", 'tsconfig.json'],
                            }) as webpack.Plugin,
    new SassLintPlugin({configPath: path.join(configOptions.assetsDir, ".sasslintrc")}) as webpack.Plugin,
    new StatsPlugin("manifest.json", {
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true
    }) as webpack.Plugin,
    new webpack.ProvidePlugin({

function createFirefoxConfig(base) {
  const common = {
    name: 'firefox',
    plugins: [copyManifest(paths.firefoxManifest)],
  }
  const development = {
    output: {
      path: paths.buildFirefox,
    },
    plugins: [
      new CleanPlugin({
        cleanOnceBeforeBuildPatterns: [paths.buildFirefox],
      }),
      copyAssets(paths.buildFirefox),
    ],
  }
  const production = {
    output: {
      path: paths.distFirefox,
    },
    plugins: [
      new CleanPlugin({
        cleanOnceBeforeBuildPatterns: [paths.distFirefox],
      }),
      copyAssets(paths.distFirefox),
    ],
  }

optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

if (isProduction) {
  webpackConfig.output.filename = '[name].[hash:8].js'
  webpackConfig.optimization.minimizer = [
    new TerserPlugin({ extractComments: false }),
    new OptimizeCSSAssetsPlugin({})
  ]
  webpackConfig.plugins.push(
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        'app.*.css',
        'app.*.js',
        'app.*.js.map',
        'vendors*',
        'dist/*.bundle.js'
      ]
    }),
    new MiniCssExtractPlugin({ filename: '[name].[hash:8].css' })
  )
  webpackConfig.resolve.alias = {
    'react-styl': 'react-styl/prod.js'
  }
  webpackConfig.module.noParse = [/^(react-styl)$/]
}

const cleanPlugin = ({ clean: { options } = {} }) => ({
	plugins: [new CleanWebpackPlugin(options)],
});