@wordpress/dependency-extraction-webpack-plugin

This webpack plugin serves two purposes:

• Externalize dependencies that are available as shared scripts or modules on WordPress sites.
• Add an asset file for each entry point that declares an object with the list of WordPress script or module dependencies for the entry point. The asset file also contains the current version calculated for the current source code.

This allows JavaScript bundles produced by webpack to leverage WordPress style dependency sharing without an error-prone process of manually maintaining a dependency list.

Version 5 of this plugin adds support for module bundling. Webpack’s output.module option should
be used to opt-in to this behavior. This plugin will adapt it’s behavior based on the
output.module option, producing an asset file suitable for use with the WordPress Module API.

Consult the webpack website for additional information on webpack concepts.

Installation

Install the module

npm install @wordpress/dependency-extraction-webpack-plugin --save-dev

Note: This package requires Node.js version with long-term support status (check Active LTS or Maintenance LTS releases). It also requires webpack 5.0.0 or newer. It is not compatible with older versions.

Usage

Webpack

Use this plugin as you would other webpack plugins:

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

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

Note: Multiple instances of the plugin are not supported and may produced unexpected results. If you plan to extend the webpack configuration from @wordpress/scripts with your own DependencyExtractionWebpackPlugin, be sure to remove the default instance of the plugin:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const webpackConfig = {
    ...defaultConfig,
    plugins: [
        ...defaultConfig.plugins.filter(
            ( plugin ) =>
                plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
        ),
        new DependencyExtractionWebpackPlugin( {
            injectPolyfill: true,
            requestToExternal( request ) {
                /* My externals */
            },
        } ),
    ],
};

Behavior with scripts

Each entry point in the webpack bundle will include an asset file that declares the WordPress script dependencies that should be enqueued. This file also contains the unique version hash calculated based on the content of the entry point’s files, including any extracted styles.

For example:

// Source file entrypoint.js
import { Component } from 'react';

// Webpack will produce a JavaScript output file, for example output/entrypoint.js
/* bundled JavaScript output */

// Webpack will also produce a matching asset file, for example
// output/entrypoint.asset.php, declaring script dependencies
<?php return array('dependencies' => array('react'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');

The generated asset file name is based on the emitted JavaScript output file name. For example, if webpack is configured with output.filename: 'bunny-plugin-[name].min.js', an entrypoint entry creates output/bunny-plugin-entrypoint.min.asset.php.

By default, the following module requests are handled:

Request	Global	Script handle
@babel/runtime/regenerator	regeneratorRuntime	wp-polyfill
@wordpress/*	wp['*']	wp-*
jquery	jQuery