webpack.config.js

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

// Plugins.
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

// Utilities.
const path = require('path');

// Extract the default config(s) and update the output path.
const configs = Array.isArray(defaultConfig) ? defaultConfig : [defaultConfig];
configs.forEach((config) => {
	config.output.path = path.resolve(process.cwd(), 'build/blocks');
});

// Add theme entrypoints by copying the default scripts config and overwriting entries.
configs.push({
	...configs[0],
	...{
		output: {
			path: path.resolve(process.cwd(), 'build/assets'),
		},
		entry: {
			editor: path.resolve(process.cwd(), 'assets/scripts', 'editor.ts'),
			main: path.resolve(process.cwd(), 'assets/scripts', 'main.ts'),
		},
		plugins: [
			// Include (most of) WP's plugin config.
			...configs[0].plugins.filter(
				(plugin) => plugin.constructor.name !== 'CopyPlugin'
			),

			// Removes the empty `.js` files generated by webpack but
			// sets it after WP has generated its `*.asset.php` file.
			// Runs only in production mode.
			...[
				process.env.NODE_ENV === 'production' &&
					new RemoveEmptyScriptsPlugin({
						stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
					}),
			].filter(Boolean),
		],
		devServer: false,
	},
});

// Fix hot reload for scripts other than viewScriptModule.
// It's better that it being completely broken due to react-refresh/babel plugin
// being included also for viewScriptModules.
// That's probably a bug in @wordpress/scripts.
configs.forEach((config) => {
	const plugin = config.plugins.find(
		(p) => p.constructor.name === 'ReactRefreshPlugin'
	);

	if (!plugin) {
		const rule = config.module.rules.find(
			(r) => r.test.test('.js') && typeof r.use === 'object'
		);
		const use = rule.use.find((u) =>
			u.loader.endsWith('babel-loader/lib/index.js')
		);

		if (use && use.options && use.options.plugins) {
			use.options.plugins = use.options.plugins.filter(
				(p) => !p.endsWith('react-refresh/babel.js')
			);
		}
	}
});

module.exports = configs;