webpack.config.js

// Set from https://www.npmjs.com/package/@wordpress/scripts
// Add package.json with the @wordpress/scripts dependency.
// Add a root file called webpack.config.js

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

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

// Utilities.
const path = require( 'path' );
const { globSync } = require( 'glob' );

// Import the helper to find and generate the entry points in the src directory
const {
	fromProjectRoot,
	getWebpackEntryPoints,
	getWordPressSrcDirectory,
} = require( '@wordpress/scripts/utils' );

/**
 * Processes individual block stylesheets for a specific block namespace. These
 * are not imported into the primary stylesheets and are enqueued separately.
 *
 * @since  1.0.0
 * @param {string} folder
 * @return {Object.<string, string>}
 */
const blockStylesheets = ( folder ) => {
	return globSync( `./resources/scss/${ folder }/**/*.scss` ).reduce(
		( files, filepath ) => {
			const relativePath = path.relative(
				'./resources/scss/${ folder }',
				filepath
			);
			const namespace = path.dirname( relativePath );
			const name = path.parse( filepath ).name;

			files[ `css/${ folder }/${ namespace }/${ name }` ] = path.resolve(
				process.cwd(),
				`resources/scss/${ folder }/${ namespace }`,
				`${ name }.scss`
			);

			return files;
		},
		{}
	);
};
 

// Add any new entry points by extending the webpack config.
module.exports = {
	...defaultConfig,
	...{
		entry: {
			...getWebpackEntryPoints(),
			...blockStylesheets( 'blocks' ),
			...blockStylesheets( 'plugins' ),
			'js/editor': path.resolve(
				process.cwd(),
				'resources/js',
				'editor.js'
			),
			'js/screen': path.resolve(
				process.cwd(),
				'resources/js',
				'screen.js'
			),
			'css/admin/editor': path.resolve(
				process.cwd(),
				'resources/scss',
				'editor.scss'
			),
			'css/screen': path.resolve(
				process.cwd(),
				'resources/scss',
				'screen.scss'
			),
		},
		plugins: [
			// Include WP's plugin config.
			...defaultConfig.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,
			} ),
			// Copies any assets that don't need to be processed to
			// the output folder.
			new CopyPlugin( {
				patterns: [
					{
						from: './resources/fonts',
						to: './fonts',
					},
					{
						from: './resources/images',
						to: './images',
					},
					{
						from: './resources/videos',
						to: './videos',
					},
				],
			} ),
		],
	},
};