WooCommerce Dependency Extraction Webpack Plugin

WooCommerce Dependency Extraction Webpack Plugin is a tool for managing your extension’s WordPress and WooCommerce dependencies. It extends the WordPress version and adds WooCommerce functionality on top so you don’t need to declare dependencies when registering your app’s scripts.

To illustrate how the plugin can aid development, consider the following example. An app makes use of WooCommerce and WordPress JavaScript components to develop a modern UI:

import { Button } from '@wordpress/components';
import { Table } from '@woocommerce/components';

These components offer a way to quickly setup elements of a screen with baked in functionality and consistent styles. Not only do these dependencies need to be declared in package.json as you would any JavaScript dependencies, but they require special consideration because the assets can be made available on the global window removing the need to be bundled in the application’s code. Luckily, WooCommerce Dependency Extraction Webpack Plugin can handle these requirements on your behalf when webpack creates a build.

Specifically, an up-to-date dependency array is supplied to wp_register_script when the import statements are added to source code.

array( 'wc-components', 'wp-components' )

Also, webpack externals are configured to find those assets on the global window to prevent unnecessarily loading them as part of the application. All this is done automatically by the plugin when webpack compiles source code.

WooCommerce Dependency Extraction Webpack Plugin can be used independently but is made to work with the tooling wp-scripts offers. If you’d like to start a new WooCommerce extension with all this functionality already in place, check out the npm run create-wc-extension command at the root of a local WooCommerce Admin instance. Otherwise, usage instructions to include it in an existing project are below.

Usage Instructions

See the WordPress version for full instructions and API details.

Webpack

Use this plugin as you would other webpack plugins:

// webpack.config.js
const WooDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );

module.exports = {
  // …snip
  plugins: [
    new WooDependencyExtractionWebpackPlugin(),
  ]
}

WordPress

Enqueue your script as usual and read the script dependencies dynamically:

$script_path       = 'path/to/script.js';
$script_asset_path = 'path/to/script.asset.php';
$script_asset      = file_exists( $script_asset_path )
	? require( $script_asset_path )
	: array( 'dependencies' => array(), 'version' => filemtime( $script_path ) );
$script_url = plugins_url( $script_path, __FILE__ );
wp_enqueue_script( 'script', $script_url, $script_asset['dependencies'], $script_asset['version'] );