Multiple WP Block with external scripts, Custom webpack for wp block

common-chunk.js

const defaultConfig                                = require('@wordpress/scripts/config/webpack.config')
const WooCommerceDependencyExtractionWebpackPlugin = require('@woocommerce/dependency-extraction-webpack-plugin')

module.exports = {
	...defaultConfig,
	plugins      : [
		...defaultConfig.plugins.filter((plugin) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'),
		new WooCommerceDependencyExtractionWebpackPlugin({
			/*requestToExternal(request) {
				if (request.includes('utils')) {
					return ['context_test_common_utils'];
				}
			},*/
			/*requestToHandle(request) {
				if (request.includes('utils')) {
					return 'context_test_common_utils'
				}
			},*/
		}),
	],
	optimization : {
		runtimeChunk : {name : "utils"}
	},
}

common-chunk.php

<?php

function custom_context_test_common_scripts() {
		 wp_enqueue_script( 'context_test_common_utils', plugin_dir_url( __FILE__ ) . '/build/utils.js', array(), filemtime( plugin_dir_path( __FILE__ ) . '/build/utils.js' ), true );
	}

	add_action( 'enqueue_block_editor_assets', 'custom_context_test_common_scripts' );

conditional-script-load.md

• Conditionally load block front-end scripts
• https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dependency-extraction-webpack-plugin/
• https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/

blockgallery_frontend_scripts() {
	if ( has_block( 'blockgallery/masonry' ) ) {
		wp_enqueue_script(
			'blockgallery-masonry',
        		plugins_url( 'dist/blockgallery-masonry.js', __FILE__ ),
			array( 'jquery', 'masonry', 'imagesloaded' ),
			filemtime( plugin_dir_path( __FILE__ ) . 'dist/blockgallery-masonry.js' )
		);
	}
}
add_action( 'wp_enqueue_scripts', 'blockgallery_frontend_scripts' );

index.php

<?php

function storepress_plugin_block_init() {
	register_block_type( __DIR__ . '/assets/block-one' );
	register_block_type( __DIR__ . '/assets/block-two' );
}
add_action( 'init', 'storepress_plugin_block_init' );

// OR

function be_gutenberg_scripts() {

	wp_enqueue_script(
		'plugin-one', 
		// or plugin_dir_path
		get_stylesheet_directory_uri() . '/assets/js/editor.js', 
		array( 'wp-blocks', 'wp-dom' ), 
		filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );

multiple-block-with-external.md

Directory structure

| package.json
| webpack.config.js
| src/
|     block-one/
|    		block.json
|    		edit.js
|    		save.js
|
|     block-two/
| 		block.json
| 		edit.js
| 		render.php
|
|     block-plugins/
|		plugin-one/
| 			index.js
| 			extra-code.php
|
|     block-plugins/
| 		plugin-two/
| 			index.js
|
|     block-plugins/
| 		extended.js
| 		extra.php

package.json

"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start",
		"start:custom": "wp-scripts start --output-path=assets --webpack-copy-php",
		"start:custom2": "wp-scripts start --webpack-src-dir=blocks --output-path=assets"
	},
	"devDependencies": {
		"@wordpress/scripts": "^24.5.0",
		"@woocommerce/eslint-plugin": "^2.2.0",
                "@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0"
	},
	
	"dependencies": {
		"@wordpress/hooks": "^3.5.0"
	}

webpack-woocommerce.config.js

const defaultConfig                                     = require('@wordpress/scripts/config/webpack.config');
const WooCommerceDependencyExtractionWebpackPlugin      = require( '@woocommerce/dependency-extraction-webpack-plugin' );
const {getWebpackEntryPoints, getWordPressSrcDirectory} = require('@wordpress/scripts/utils/config');
const fs                                                = require('fs');
const CopyWebpackPlugin                                 = require('copy-webpack-plugin');

const src     = getWordPressSrcDirectory();
const plugins = `block-plugins`

function isDir(path) {
	try {
		let stat = fs.lstatSync(path);
		return stat.isDirectory();
	} catch (e) {
		// lstatSync throws an error if path doesn't exist
		return false;
	}
}

module.exports = {
	...defaultConfig,
	entry   : {
		...getWebpackEntryPoints(),
		...fs
			.readdirSync(`./${src}/${plugins}`)
			.reduce((acc, path) => {

				if (path.includes(`.php`)) {
					return acc;
				}

				acc[`${plugins}/${path}`] = `./${src}/${plugins}/${path}`;
				return acc;
			}, {}),
	},
	output  : {
		...defaultConfig.output,
		filename : (pathData) => {

			if (!pathData.chunk.name.includes(`${plugins}`)) {
				return '[name].js';
			}

			if (pathData.chunk.name.includes(`${plugins}`) && isDir(`./${src}/${pathData.chunk.name}`)) {
				return `[name]/index.js`;
			}

			return '[name]';
		},
	},
	plugins : [
		...defaultConfig.plugins.filter(( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'),
    new WooCommerceDependencyExtractionWebpackPlugin(),
		new CopyWebpackPlugin({
			patterns : [
				{
					from             : `${plugins}/**/{block.json,*.php,*.css}`,
					context          : src,
					noErrorOnMissing : true,
				}
			],
		}),
	],
}

webpack.config.js

const defaultConfig                                     = require('@wordpress/scripts/config/webpack.config');
const {getWebpackEntryPoints, getWordPressSrcDirectory} = require('@wordpress/scripts/utils/config');
const fs                                                = require('fs');
const CopyWebpackPlugin                                 = require('copy-webpack-plugin');

const src     = getWordPressSrcDirectory();
const plugins = `block-plugins`

function isDir(path) {
	try {
		let stat = fs.lstatSync(path);
		return stat.isDirectory();
	} catch (e) {
		// lstatSync throws an error if path doesn't exist
		return false;
	}
}

module.exports = {
	...defaultConfig,
	entry   : {
		...getWebpackEntryPoints(),
		...fs
			.readdirSync(`./${src}/${plugins}`)
			.reduce((acc, path) => {

				if (path.includes(`.php`)) {
					return acc;
				}

				acc[`${plugins}/${path}`] = `./${src}/${plugins}/${path}`;
				return acc;
			}, {}),
	},
	output  : {
		...defaultConfig.output,
		filename : (pathData) => {

			if (!pathData.chunk.name.includes(`${plugins}`)) {
				return '[name].js';
			}

			if (pathData.chunk.name.includes(`${plugins}`) && isDir(`./${src}/${pathData.chunk.name}`)) {
				return `[name]/index.js`;
			}

			return '[name]';
		},
	},
	plugins : [
		...defaultConfig.plugins,
		new CopyWebpackPlugin({
			patterns : [
				{
					from             : `${plugins}/**/{block.json,*.php,*.css}`,
					context          : src,
					noErrorOnMissing : true,
				}
			],
		}),
	],
}