webpack.config.js

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

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

// Extend the default config.
const sharedConfig = {
	...defaultScriptConfig,
	output: {
		path: path.resolve( process.cwd(), 'build' ),
		filename: '[name].js',
		chunkFilename: '[name].js',
	},
};

// Generate a webpack config which includes setup for CSS extraction.
// Look for css/scss files and extract them into a build/css directory.
const styles = {
	...sharedConfig,
	entry: () => {
		const entries = {};

		const dir = './assets/src/css';
		fs.readdirSync( dir ).forEach( ( fileName ) => {
			const fullPath = `${ dir }/${ fileName }`;
			if (
				! fs.lstatSync( fullPath ).isDirectory() &&
				fileName.match( /\.(scss|css)$/ )
			) {
				entries[ fileName.replace( /\.[^/.]+$/, '' ) ] = fullPath;
			}
		} );

		return entries;
	},
	plugins: [
		...sharedConfig.plugins.filter(
			( plugin ) =>
				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
		),
		// 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 scripts = {
	...sharedConfig,
	entry: {
		'media-sharing': path.resolve(
			process.cwd(),
			'assets',
			'src',
			'admin/media-sharing',
			'index.js'
		),
		settings: path.resolve(
			process.cwd(),
			'assets',
			'src',
			'admin',
			'settings',
			'index.tsx'
		),
		onboarding: path.resolve(
			process.cwd(),
			'assets',
			'src',
			'admin',
			'onboarding',
			'index.tsx'
		),
		'media-sync-filter': path.resolve(
			process.cwd(),
			'assets',
			'src',
			'js',
			'media-sync-filter.js'
		),
		'media-frame': path.resolve(
			process.cwd(),
			'assets',
			'src',
			'js',
			'media-frame.js'
		),
	},
	module: {
		rules:
			sharedConfig?.module?.rules?.filter( ( rule ) => {
				// Only keep JS/TS/JSX/TSX rules for scripts config, exclude CSS/SCSS
				return (
					! rule.test ||
					( ! rule.test.toString().includes( 'scss' ) &&
						! rule.test.toString().includes( 'css' ) )
				);
			} ) || [],
	},
	resolve: {
		...sharedConfig.resolve,
		extensions: [ '.tsx', '.ts', '.jsx', '.js' ],
		alias: {
			...( sharedConfig.resolve?.alias || {} ),
			'@': path.resolve( process.cwd(), 'assets', 'src' ),
		},
	},
	plugins: [
		...sharedConfig.plugins,
		// Removes empty `.js` files (e.g., polyfills that resolve to nothing)
		new RemoveEmptyScriptsPlugin( {
			stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
		} ),
	],
};

module.exports = [
	scripts,
	styles, // Do not remove this.
];