plugins.js

const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
const BellOnBundleErrorPlugin = require( 'bell-on-bundler-error-plugin' );
const CopyPlugin = require( 'copy-webpack-plugin' );
const ESLintPlugin = require( 'eslint-webpack-plugin' );
const { WebpackManifestPlugin: ManifestPlugin } = require( 'webpack-manifest-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
const SimpleBuildReportPlugin = require( 'simple-build-report-webpack-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );
const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );
const ImageMinimizerPlugin = require( 'image-minimizer-webpack-plugin' );

const { applyFilters } = require( './helpers/filters' );

const isProfileMode = process.argv.includes( '--profile' );

module.exports = {
	/**
	 * Expose plugin constructor functions for use in consuming applications.
	 *
	 * @prop {Object} constructors
	 */
	constructors: {
		BellOnBundleErrorPlugin,
		BundleAnalyzerPlugin,
		CleanWebpackPlugin,
		CopyPlugin,
		ESLintPlugin,
		ManifestPlugin,
		MiniCssExtractPlugin,
		CssMinimizerPlugin,
		RemoveEmptyScriptsPlugin,
		SimpleBuildReportPlugin,
		TerserPlugin,
	},

	/**
	 * Check an array to see if it contains an instance of a particular plugin.
	 *
	 * @param {Object[]} plugins           Array of plugin instance objects.
	 * @param {Function} PluginConstructor Constructor function for which to check
	 *                                     for existing plugin instances.
	 * @returns {(Object|null)} The matched plugin instance object, or null.
	 */
	findExistingInstance: ( plugins, PluginConstructor ) => {
		if ( ! Array.isArray( plugins ) ) {
			return null;
		}
		const match = plugins.find( plugin => plugin instanceof PluginConstructor );
		return match || null;
	},

	/**
	 * Create a new BundleAnalyzerPlugin instance.
	 *
	 * @param {Object} [options] Optional plugin options object.
	 * @returns {BundleAnalyzerPlugin} A configured BundleAnalyzerPlugin instance.
	 */
	bundleAnalyzer: ( options = {} ) => new BundleAnalyzerPlugin( {
		analyzerMode: 'static',
		generateStatsFile: true,
		openAnalyzer: false,
		reportFilename: 'bundle-analyzer-report.html',
		...options,
	} ),

	/**
	 * Create a CleanWebpackPlugin instance.
	 *
	 * @param {Object} [options] Optional plugin options object.
	 * @returns {CleanWebpackPlugin} A configured CleanWebpackPlugin instance.
	 */
	clean: ( options ) => new CleanWebpackPlugin( options ),

	/**
	 * See https://webpack.js.org/plugins/copy-webpack-plugin/ for full specification.
	 *
	 * @typedef CopyPattern
	 * @type {Object}
	 * @property {String}   from        The absolute directory path from which to copy files.
	 * @property {String}   to          The absolute directory path to which to copy files.
	 * @property {RegExp}   [test]      A Regular Expression to limit the files which get copied.
	 * @property {String}   [context]   A path that determines how to interpret the "from" path.
	 * @property {Function} [transform] Modify file contents on copy.
	 */
	/**
	 * Create a CopyPlugin instance.
	 *
	 * See https://webpack.js.org/plugins/copy-webpack-plugin/#options for full
	 * options object documentation.
	 *
	 * @param {Object}        [options]          Optional plugin options object.
	 * @param {CopyPattern[]} [options.patterns] Array of pattern objects ( `{ from, to[, test] }` ).
	 * @returns {CopyPlugin} A configured CopyPlugin instance.
	 */
	copy: ( options ) => new CopyPlugin( options ),

	/**
	 * Create a BellOnBundleErrorPlugin instance.
	 *
	 * @returns {BellOnBundleErrorPlugin} A BellOnBundleErrorPlugin instance.
	 */
	errorBell: () => new BellOnBundleErrorPlugin(),

	/**
	 * Create a new ESLintPlugin instance to check your build for syntax or style issues.
	 *
	 * @param {Object} options Optional plugin options object.
	 * @returns {ESLintPlugin} A configured ESLintPlugin instance.
	 */
	eslint: ( options ) => new ESLintPlugin( {
		extensions: [ 'js', 'jsx', 'ts', 'tsx' ],
		exclude: [ 'node_modules', 'vendor', '*.min.js', '*.min.jsx' ],
		...options,
	} ),

	/**
	 * Create a new RemoveEmptyScriptsPlugin instance to remove unnecessary JS
	 * files generated for style-only bundle entries.
	 *
	 * @param {Object} [options]         Optional plugin options object.
	 * @param {RegExp} [options.exclude] Regular expression to filter what gets cleaned.
	 * @returns {RemoveEmptyScriptsPlugin} A configured RemoveEmptyScriptsPlugin instance.
	 */
	fixStyleOnlyEntries: ( options ) => new RemoveEmptyScriptsPlugin( options ),

	/**
	 * Create a new ManifestPlugin instance to output an asset-manifest.json
	 * file, which can be consumed by the PHP server to auto-load generated
	 * assets from the development server. A publicPath matching the URL
	 * in the configuration's output.publicPath is required.
	 *
	 * @param {Object} options            Plugin options overrides.
	 * @param {String} options.publicPath The base URI to prepend to build asset URIs.
	 * @returns {ManifestPlugin} A configured ManifestPlugin instance.
	 */
	manifest: ( options = {} ) => new ManifestPlugin( {
		fileName: 'asset-manifest.json',
		writeToFileEmit: true,
		map: ( file ) => {
			// Work around https://github.com/romainberger/webpack-rtl-plugin/issues/14
			// to make sure an RTL file has a separate entry in the manifest.
			if ( ( /\.rtl\.css$/ ).test( file.path ) ) {
				file.name = file.name.replace( '.css', '.rtl.css' );
			}

			return file;
		},
		...options,
	} ),

	/**
	 * Create a new MiniCssExtractPlugin instance.
	 *
	 * @param {Object} [options]          Optional plugin configuration options.
	 * @param {Object} [options.filename] The filename to use for the output CSS.
	 * @returns {MiniCssExtractPlugin} A configured MiniCssExtractPlugin instance.
	 */
	miniCssExtract: ( options = {} ) => new MiniCssExtractPlugin( {
		filename: '[name].[contenthash].css',
		...options,
	} ),

	/**
	 * Create a new CssMinimizerPlugin instance.
	 *
	 * @param {Object} [options] Optional plugin configuration options.
	 * @returns {CssMinimizerPlugin} A configured CssMinimizerPlugin instance.
	 */
	cssMinimizer: ( options = {} ) => new CssMinimizerPlugin( options ),

	/**
	 * Image Minimizer Plugin.
	 *
	 * @returns {ImageMinimizerPlugin}
	 */
	imageMinimizer: () => {
		// Svgo configuration.
		// Reference: https://github.com/svg/svgo#configuration
		// Example: https://github.com/svg/svgo#default-preset
		const svgoConfig = {
			plugins: [
				{
					name: 'preset-default',
					params: {
						overrides: {
							'removeViewBox': false,
						},
					},
				},
			],
		};

		return new ImageMinimizerPlugin( {
			minimizer: {
				implementation: ImageMinimizerPlugin.imageminMinify,
				options: {
					plugins: [
						[ 'gifsicle', { interlaced: true } ],
						[ 'jpegtran', { progressive: true } ],
						[ 'optipng', { optimizationLevel: 5 } ],
						[ 'svgo', svgoConfig ],
					],
				},
			},
		} );

	},

	/**
	 * Instantiate a SimpleBuildReportPlugin to render build output in a human-
	 * oriented fashion.
	 *
	 * @returns {SimpleBuildReportPlugin} Output formatter plugin instance.
	 */
	simpleBuildReport: () => new SimpleBuildReportPlugin(),

	/**
	 * Create a new TerserPlugin instance, defaulting to a set of options
	 * borrowed from create-react-app's configuration.
	 *
	 * @param {Object} [options]               Plugin configuration option overrides
	 *                                         to merge into the defaults.
	 * @param {Object} [options.terserOptions] Terser compressor options object.
	 * @returns {TerserPlugin} A configured TerserPlugin instance.
	 */
	terser: ( options = {} ) => new TerserPlugin( {
		...applyFilters( 'plugins/terser/defaults', {
			terserOptions: {
				parse: {
					// We want terser to parse ecma 8 code. However, we don't want it
					// to apply any minification steps that turns valid ecma 5 code
					// into invalid ecma 5 code. This is why the 'compress' and 'output'
					// sections only apply transformations that are ecma 5 safe
					// https://github.com/facebook/create-react-app/pull/4234
					ecma: 8,
				},
				compress: {
					ecma: 5,
					warnings: false,
					// Disabled because of an issue with Uglify breaking seemingly valid code:
					// https://github.com/facebook/create-react-app/issues/2376
					// Pending further investigation:
					// https://github.com/mishoo/UglifyJS2/issues/2011
					comparisons: false,
					// Disabled because of an issue with Terser breaking valid code:
					// https://github.com/facebook/create-react-app/issues/5250
					// Pending further investigation:
					// https://github.com/terser-js/terser/issues/120
					inline: 2,
				},
				mangle: {
					safari10: true,
				},
				// Added for profiling in devtools
				keep_classnames: isProfileMode,
				keep_fnames: isProfileMode,
				output: {
					ecma: 5,
					comments: false,
					// Turned on because emoji and regex is not minified properly using default
					// https://github.com/facebook/create-react-app/issues/2488
					ascii_only: true,
				},
			},
		} ),
		...options,
	} ),
};