webpack.config.js

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

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

// Extend the default config.
const sharedConfig = {
	...defaultConfig,
	output: {
		path: path.resolve( process.cwd(), 'build' ),
		filename: '[name].js',
		chunkFilename: '[name].js',
	},
	plugins: [
		...defaultConfig.plugins,
		new RemoveEmptyScriptsPlugin(),
	],
	optimization: {
		...defaultConfig.optimization,
		splitChunks: {
			...defaultConfig.optimization.splitChunks,
		},
		minimizer: defaultConfig.optimization.minimizer.concat( [ new CssMinimizerPlugin() ] ),
	},
};

// 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,
	output: {
		path: path.resolve( process.cwd(), 'build' ),
		filename: '[name].js',
		chunkFilename: '[name].js',
	},
	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',
		),
	],
};

const scripts = {
	...sharedConfig,
	entry: {
		main: path.resolve( process.cwd(), 'assets', 'src', 'js', 'main.js' ),
		'user-profile': path.resolve( process.cwd(), 'assets', 'src', 'js', 'user-profile.js' ),
		admin: path.resolve( process.cwd(), 'assets', 'src', 'js', 'admin.js' ),
		settings: path.resolve( process.cwd(), 'assets', 'src', 'admin/settings', 'index.tsx' ),
		onboarding: path.resolve( process.cwd(), 'assets', 'src', 'admin', 'onboarding', 'index.tsx' ),
		'manage-users': path.resolve( process.cwd(), 'assets', 'src', 'admin/manage-users', 'index.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' ),
		},
	},
};

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