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

import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin'

import application_configuration from '../code/common/configuration'

const configuration = Object.clone(base_configuration)

configuration.devtool = 'cheap-module-source-map'

configuration.output.filename      = configuration.output.filename.replace('[hash]', '[chunkhash]')
configuration.output.chunkFilename = configuration.output.chunkFilename.replace('[hash]', '[chunkhash]')

configuration.plugins = configuration.plugins.concat
(
	// clears the output folder
	new clean_plugin([path.relative(configuration.context, configuration.output.path)],
	{
		root: configuration.context
	}),

	// environment variables
	new webpack.DefinePlugin
	({
		'process.env':
		{
			// Useful to reduce the size of client-side libraries, e.g. react
			NODE_ENV: JSON.stringify('production') // 'development' to see non-minified React errors
		},

		_client_            : true,
		_server_            : false,
		_development_       : false,

export default makeConfig({
  name: "app",

  entry: {
    app: [path.join(root, "src/app")],
  },

  output: {
    path: path.join(outputPath, "public"),
    publicPath: "/",
    devtoolNamespace: "app",
  },

  plugins: [
    new CleanPlugin(outputPath, { root }),

    // Generates an `index.html` file with the 

import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin'

import application_configuration from '../../code/configuration'

const configuration = Object.clone(base_configuration)

configuration.devtool = 'cheap-module-source-map'

configuration.output.filename      = configuration.output.filename.replace('[hash]', '[chunkhash]')
configuration.output.chunkFilename = configuration.output.chunkFilename.replace('[hash]', '[chunkhash]')

configuration.plugins = configuration.plugins.concat
(
	// clears the output folder
	new clean_plugin([path.relative(configuration.context, configuration.output.path)],
	{
		root: configuration.context
	}),

	// environment variables
	new webpack.DefinePlugin
	({
		'process.env':
		{
			// Useful to reduce the size of client-side libraries, e.g. react
			NODE_ENV: JSON.stringify('production') // 'development' to see non-minified React errors
		},

		_development_tools_ : false // `redux-devtools` on/off
	}),

uglifyOptions: {
          mangle: {
            safari10: true
          }
        },
        sourceMap: false,
        cache: true,
        parallel: true
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin()
    ]
  },
  plugins: [
    new CleanWebpackPlugin(paths.appBuildDist, {
      root: process.cwd(),
    }),
    new HtmlWebpackPlugin({
      favicon: paths.appFavicon,
      title: 'UIW React, A high quality UI Toolkit, A Component Library for React 16+.',
      inject: true,
      template: paths.appHtml,
      minify: {
        html5: true,
        useShortDoctype: true,
        collapseWhitespace: true,
        conservativeCollapse: true,
        preserveLineBreaks: true,
        removeComments: true,
        keepClosingSlash: true,
        removeRedundantAttributes: true,

export function getPlugins({
	isDev,
	bannerConfig,
}: GetPluginsConfig): webpack.Plugin[] {
	// Figure the NODE_ENV string
	const ENV: string = JSON.stringify(isDev ? 'production' : 'development');
	// Add common plugins
	const plugins: webpack.Plugin[] = [
		// Define env
		new webpack.DefinePlugin({
			'process.env.NODE_ENV': ENV,
			'process.env.BABEL_ENV': ENV,
		}),
		// Clean dist directory
		new cleanWebpackPlugin(['dist']),
		// Initiate mini css extract
		new miniCssExtractPlugin({
			filename: '[name].css',
		}),
	];
	// Add development specific plugins
	if (isDev) {
		plugins.push(
			// Hot Module Replacement
			new webpack.HotModuleReplacementPlugin()
		);
	} else {
		// Add Production specific plugins
		plugins.push(
			// Banner plugin
			new webpack.BannerPlugin({

const DEV_SERVER_PORT = 3000
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
const PATH_TO_SRC = path.resolve(__dirname, '..', 'src')
const PATH_TO_DIST = path.resolve(__dirname, 'js')
const PATH_TO_DEV_DIST = path.resolve(__dirname, 'public')

const CLEAN_OPTIONS = {
  // Instead of this ugly hack — we will get "wwwroot is outside of the project root. Skipping..."
  root: path.resolve(PATH_TO_DIST, '..'),
  exclude: ['index.html', 'favicon.png'],
  verbose: true,
  dry: false,
}

const productionPlugins = [
  new CleanWebpackPlugin(PATH_TO_DIST, CLEAN_OPTIONS),
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
  }),
]

export default {
  mode: 'development',

  entry: path.resolve(PATH_TO_SRC, 'index.js'),

  output: {
    path: !IS_PRODUCTION ? PATH_TO_DEV_DIST : PATH_TO_DIST,
    filename: 'bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/',

prodRules.push(this.setCssModulesRule());
        // 设置Less解析规则，生产环境不开启css-hot-loader
        prodRules.push(this.setLessRule(false, options.usePx2rem, options.remUnit, options.remPrecision));
        // 设置开启CSS Modules的Less解析规则，生产环境不开启css-hot-loader
        prodRules.push(this.setLessModulesRule(false, options.usePx2rem, options.remUnit, options.remPrecision));
        // 设置JS解析规则
        prodRules.push(this.setJsRule(options.babelrcPath));
        // 设置TS解析规则
        prodRules.push(this.setTsRule());
        // 设置字体解析规则
        prodRules.push(this.setFontRule());

        // 设置打包插件
        let prodPlugins: Array = [];
        // 清空Public目录插件, https://github.com/johnagan/clean-webpack-plugin/issues/17
        prodPlugins.push(new CleanWebpackPlugin([options.outDir], {
            root: projectRoot,
            verbose: true,
            dry: false
        }));
        prodPlugins.push(new StringReplaceWebpackPlugin());
        // 设置提取CSS为一个单独的文件的插件
        prodPlugins.push(this.setMiniCssExtractPlugin(true, ''));
        prodPlugins.push(this.setOptimizeCssAssetsPlugin());
        if (options.minifyJS) {
            // 压缩JS
            // webpack4 mode=production 下会默认启动 terser-webpack-plugin
        }
        if (options.useReact !== false) {
            // React, react-dom 通过cdn引入
            prodPlugins.push(this.setExternalPlugin(options.externals));
        }

} else if (entryName === 'move-winpty-binaries') {
    entry = {
      'move-winpty-binaries': './src/scripts/move-winpty-binaries'
    }
    pathValue = path.resolve(
      __dirname,
      'dist',
      'preinstallScripts'
    )
    output = {
      path: pathValue,
      filename: '[name].js'
    }
    devtool = false
    plugins.push(
      new CleanWebpackPlugin(
        [pathValue]
      )
    )
  } else {
    console.error(`Unknown entryName: ${entryName}`)
  }
  return {
    mode: NODE_ENV,
    entry: entry,
    output: output,
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader'

maxAsyncRequests: Infinity,
      maxInitialRequests: Infinity,
      minSize: 0,
      name: true,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new WebpackMd5Hash(),
    new CleanWebpackPlugin(distOutput, {}),
    new MiniCssExtractPlugin({
      filename: isProd ? '[name]-[contenthash].css' : '[name].bundle.css'
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, 'app/index.hbs'),
      filename: 'index.html',
      data: {
        title: 'React Webpack Boilerplate',
        isProd: isProd,
        noscript: 'Your browser does not support JavaScript!'
      },
      inject: true,
      minify: isProd,
      cache: isProd,
      hash: isProd
    }),

function getBaseConfig() {
  return {
    entry: [resolve("src", "index.js")],
    plugins: [
      new HtmlWebpackPlugin({
        template: "src/index.tpl.html",
        inject: "body",
        filename: "index.html"
      }),
      new webpack.NoEmitOnErrorsPlugin(),
      new CleanWebpackPlugin(["build"])
    ],
    output: {
      path: join(__dirname, "build"),
      filename: "[hash].bundle.js",
      publicPath: "/"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          include: join(__dirname, "src"),
          use: [
            {
              loader: "babel-loader",
              options: {
                babelrc: false,