webpack.config.js

/**
 * WordPress dependencies
 */
const [
	defaultScriptConfig,
	defaultModuleConfig,
] = require( '@wordpress/scripts/config/webpack.config' );

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

/**
 * Define your script entrypoints here.
 *
 * Each entrypoint will be built into its own enqueuable asset.
 *
 * Blocks are handled separately via the `--package-manifest` flag in @wordpress/scripts
 */
const scriptEntries = {
	admin: path.resolve( process.cwd(), 'src/admin/index.ts' ),
	editor: path.resolve( process.cwd(), 'src/editor/index.ts' ),
	frontend: path.resolve( process.cwd(), 'src/frontend/index.ts' ),
	// CSS assets can also be generated.
	'global-styles': path.resolve(
		process.cwd(),
		'src/global-styles/index.scss'
	),
};

/**
 * Define your Script Module entrypoints here.
 *
 * Each entrypoint will be built into its own enqueuable asset.
 *
 * Blocks are handled separately via the `--package-manifest` flag in @wordpress/scripts
 */
const scriptModuleEntries = {
	// Example:
	'example-module': path.resolve(
		process.cwd(),
		'src/example-module/index.ts'
	),
};

const scriptConfig = {
	...defaultScriptConfig,
	entry: {
		// WordPress stores them in a function.
		...defaultScriptConfig.entry(),
		...scriptEntries,
	},

	plugins: [
		// Include WP's plugin config.
		...defaultScriptConfig.plugins,

		// Removes the empty `.js` files generated by webpack but
		// sets it after WP has generated its `*.asset.php` file.
		new RemoveEmptyScriptsPlugin( {
			stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
		} ),
	],
};

const moduleConfig = {
	...defaultModuleConfig,
	entry: {
		...defaultModuleConfig.entry,
		...scriptModuleEntries,
	},
};

module.exports = [ scriptConfig, moduleConfig ];