webpack.config.js

/**
 * External Dependencies
 */
const fs = require( 'fs' );
const path = require( 'path' );
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );

/**
 * WordPress Dependencies
 */
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );

/**
 * Retrieves the entry points for variation JavaScript files located in the
 * 'src/variations' directory.
 *
 * This function checks if the 'variations' directory exists in the current
 * working directory. If it does, it reads the subdirectories within it and
 * maps each variation's `index.js` file to an entry point, where the key
 * is in the format `variations/{variation}/index` and the value is the
 * path to the `index.js` file.
 *
 * @return {Object} An object where each key is a variation entry path
 *                  (e.g., `variations/{variation}/index`) and each value
 *                  is the corresponding path to the `index.js` file for
 *                  that variation. Returns an empty object if the
 *                  'variations' directory does not exist.
 */
function getVariationEntries() {
	const variationsDir = path.resolve( process.cwd(), 'src/variations', 'core' );
	const entries = {};

	if ( ! fs.existsSync( variationsDir ) ) {
		return entries;
	}

	const variationDirs = fs.readdirSync( variationsDir );

	for ( const variation of variationDirs ) {
		const variationPath = path.join( variationsDir, variation );
		entries[ `variations/core/${ variation }/index` ] = path.join(
			variationPath,
			'index.js',
		);
	}

	return entries;
}

module.exports = [
	// The scripts (classic) config, with the project's extra entries. This
	// replaces defaultConfig[ 0 ] rather than being appended alongside it —
	// exporting both compiled every classic entry twice.
	{
		...defaultConfig[ 0 ],
		entry: {
			...defaultConfig[ 0 ].entry(),
			admin_style: path.resolve( process.cwd(), 'src', 'admin.scss' ),
			editor: path.resolve( process.cwd(), 'src', 'editor.js' ),
			panels: path.resolve( process.cwd(), 'src/panels', 'index.js' ),
			modals: path.resolve( process.cwd(), 'src/modals', 'index.js' ),
			settings: path.resolve( process.cwd(), 'src/settings', 'index.js' ),
			settings_style: path.resolve(
				process.cwd(),
				'src/settings',
				'style.scss',
			),
			profile: path.resolve( process.cwd(), 'src/profile', 'index.js' ),
			profile_style: path.resolve(
				process.cwd(),
				'src/profile',
				'style.scss',
			),
			utility_style: path.resolve( process.cwd(), 'src', 'utility.scss' ),
			leaflet_style: path.resolve(
				process.cwd(),
				'src',
				'leaflet-style.js'
			),
			tooltip_view: path.resolve(
				process.cwd(),
				'src/formats/tooltip',
				'view.js'
			),
			'integrations/aql/index': path.resolve(
				process.cwd(),
				'src/integrations/aql',
				'index.js'
			),
			...getVariationEntries(),
		},
		module: {
			...defaultConfig[ 0 ].module,
			rules: [
				...defaultConfig[ 0 ].module.rules.filter(
					( rule ) =>
						! /\\\.\(bmp\|png\|jpe\?g\|gif\|webp\)\$/i.test(
							rule.test.toString(),
						),
				),
				...[
					{
						test: /\.(bmp|png|jpe?g|gif|webp)$/i,
						type: 'asset/resource',
						generator: {
							filename: 'images/[name][ext]',
						},
					},
				],
			],
		},
		plugins: [
			/**
			 * Removes empty .js files generated by webpack during CSS extraction.
			 *
			 * Stage configuration ensures proper execution order with other plugins,
			 * especially @wordpress/dependency-extraction-webpack-plugin.
			 *
			 * @see https://github.com/webdiscus/webpack-remove-empty-scripts
			 */
			new RemoveEmptyScriptsPlugin( {
				stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
			} ),
			...defaultConfig[ 0 ].plugins,
		],
	},
	// The script-modules config (from --experimental-modules). Both configs
	// emit async chunks as `[id].js` into build/ by default, and the ids can
	// collide — the classic build then overwrites a module-format chunk with
	// a jsonp-format one, and the module runtime dies importing it
	// (\"Cannot read properties of undefined (reading 'length')\", #2009).
	// A distinct chunk filename keeps the two chunk namespaces apart.
	{
		...defaultConfig[ 1 ],
		output: {
			...defaultConfig[ 1 ].output,
			chunkFilename: '[id].module.js',
		},
	},
];