one-click-accessibility/webpack.config.js

const fs = require('fs');
const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

class ChunksManifestPlugin {
	apply(compiler) {
		compiler.hooks.afterEmit.tapAsync(
			'ChunksManifestPlugin',
			(compilation, callback) => {
				const manifest = {};
				compilation.entrypoints.forEach((entrypoint, name) => {
					manifest[name] = entrypoint
						.getFiles()
						.filter((file) => file.endsWith('.js'));
				});
				try {
					fs.writeFileSync(
						path.join(compilation.outputOptions.path, 'chunks-manifest.json'),
						JSON.stringify(manifest, null, 2),
					);
					callback();
				} catch (err) {
					callback(err);
				}
			},
		);
	}
}

// add your entry points here
const entryPoints = {
	admin: path.resolve(process.cwd(), 'modules/settings/assets/js', 'admin.js'),
	scanner: path.resolve(process.cwd(), 'modules/scanner/assets/js', 'index.js'),
	'remediation-module': path.resolve(
		process.cwd(),
		'modules/remediation/assets/js',
		'module.js',
	),
	'ea11y-scanner-wizard': path.resolve(
		process.cwd(),
		'assets/dev/css',
		'ea11y-scanner-wizard.scss',
	),
	'ea11y-scanner-admin': path.resolve(
		process.cwd(),
		'assets/dev/css',
		'ea11y-scanner-admin.scss',
	),
	fonts: path.resolve(process.cwd(), 'assets/css', 'fonts.css'),
	'skip-link': path.resolve(process.cwd(), 'assets/dev/css', 'skip-link.scss'),
	'gutenberg-custom-link': path.resolve(
		process.cwd(),
		'modules/widget/assets/js',
		'ally-gutenberg-block.js',
	),
	'deactivation-ally': path.resolve(
		process.cwd(),
		'modules/deactivation/assets/js',
		'deactivation-feedback.js',
	),
	reviews: path.resolve(
		process.cwd(),
		'modules/reviews/assets/src',
		'reviews.js',
	),
};

const modulesExcludedFromSplitChunks = [
	'scanner',
	'gutenberg-custom-link',
	'reviews',
	'deactivation-ally',
];

const maxFileSize = 1024 * 244; // 244 KB

// React JSX Runtime Polyfill
const reactJSXRuntimePolyfill = {
	entry: {
		'react-jsx-runtime': {
			import: 'react/jsx-runtime',
		},
	},
	output: {
		path: path.resolve(__dirname, 'assets/lib'),
		filename: 'react-jsx-runtime.js',
		library: {
			name: 'ReactJSXRuntime',
			type: 'window',
		},
	},
	externals: {
		react: 'React',
	},
};

module.exports = [
	{
		...defaultConfig,
		entry: entryPoints,
		output: {
			...defaultConfig.output,
			path: path.resolve(process.cwd(), 'assets/build'),
			clean: true,
		},
		resolve: {
			alias: {
				'@ea11y-apps/global': path.resolve(__dirname, 'assets/dev/js'),
				'@ea11y/hooks': path.resolve(
					__dirname,
					'modules/settings/assets/js/hooks/',
				),
				'@ea11y/components': path.resolve(
					__dirname,
					'modules/settings/assets/js/components/',
				),
				'@ea11y/icons': path.resolve(
					__dirname,
					'modules/settings/assets/js/icons/',
				),
				'@ea11y/layouts': path.resolve(
					__dirname,
					'modules/settings/assets/js/layouts/',
				),
				'@ea11y/pages': path.resolve(
					__dirname,
					'modules/settings/assets/js/pages/',
				),
				'@ea11y/services': path.resolve(
					__dirname,
					'modules/settings/assets/js/services',
				),
				'@ea11y-apps/scanner': path.resolve(
					__dirname,
					'modules/scanner/assets/js',
				),
			},
			extensions: ['.js', '.jsx'],
		},
		optimization: {
			...defaultConfig.optimization,
			minimize: process.env.NODE_ENV === 'production',
			minimizer: [
				...defaultConfig.optimization.minimizer,
				new CssMinimizerPlugin(), // Minimize CSS
			],
			splitChunks: {
				chunks: (chunk) => !modulesExcludedFromSplitChunks.includes(chunk.name),
				cacheGroups: {
					defaultVendors: {
						test: /[\\/]node_modules[\\/]/,
						maxSize: maxFileSize,
						name(module) {
							const pkg = module.context.match(
								/[\\/]node_modules[\\/](@[^\\/]+[\\/][^\\/]+|[^\\/]+)/,
							);
							return pkg
								? `lib-${pkg[1].replace('@', '').replace('/', '-')}`
								: 'lib';
						},
						priority: -10,
						reuseExistingChunk: true,
					},
					default: {
						minChunks: 2,
						priority: -20,
						reuseExistingChunk: true,
					},
				},
			},
		},
		plugins: [...(defaultConfig.plugins || []), new ChunksManifestPlugin()],
		performance: {
			hints: 'warning',
			maxAssetSize: maxFileSize,
			maxEntrypointSize: maxFileSize,
		},
	},

	reactJSXRuntimePolyfill,
];