How to use clean-webpack-plugin - 10 common examples

/* 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("/[^/]+\\.[^/]+$")
        // ]
      }),

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: '/',