How to use critters-webpack-plugin - 2 common examples

config.module.rules.forEach(loader => {
		const opts = delve(loader, 'use.0.options.options');
		if (opts && opts.paths) delete opts.paths;
	});

	// Add CSS Custom Property fallback
	const cssConfig = config.module.rules.filter(d => d.test.test('foo.less'));
	cssConfig.forEach(c => {
		c.use.filter(d => d.loader == 'postcss-loader').forEach(x => {
			x.options.plugins.push(customProperties({ preserve: true }));
		});
	});

	const critters = helpers.getPluginsByName(config, 'Critters')[0];
	if (critters) {
		config.plugins[critters.index] = new Critters({
			preload: 'media',
			mergeStylesheets: false,
			pruneSource: false
		});
	}

	// Fix keyframes being minified to colliding names when using lazy-loaded CSS chunks
	const optimizeCss = config.optimization && (config.optimization.minimizer || []).filter(plugin => /^OptimizeCssAssets(Webpack)?Plugin$/.test(plugin.constructor.name))[0];
	if (optimizeCss) {
		optimizeCss.options.cssProcessorOptions.reduceIdents = false;
	}

	Object.assign(config.optimization.splitChunks || (config.optimization.splitChunks = {}), {
		minSize: 1000
	});

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
});

const visualizerPlugin = new Visualizer({ filename: './statistics.html' });