mobilemadman2 / wordpress-enqueue-chunks-webpack-plugin Goto Github PK

This is a simple webpack plugin that maps all of your entries and split chunks into a manifest. A PHP script is then generated with the manifest and a few other variables. That script can then be used in WordPress projects to easily register any required scripts and their dependencies without having to keep track of webpack compilation changes.

When utilizing Webpack's splitChunks optimization you won't always know what the final output will be. It can be a pain to keep track of any changes to the ouput and making sure all scripts and their dependencies are being registered successfully in WordPress.

For example, passing the following entries into Webpack could result in the following output depending on how splitChunks is configured:

• src/foo.js
• src/bar.js

• foo.bundle.js
• bar.bundle.js
• vendors-foo.bundle.js
• common-foo-bar.bundle.js
• vendors-bar.bundle.js

Making any number of changes in your splitChunks config could result in a totally different compilation result. This plugin will help you automate registering these scripts in WordPress without having to know what chunks are required for each script.

Require or autoload the generated PHP script in your project. Using the entries and output from above as an example, you can call registerScript(['foo']) and foo.bundle.js along with vendors-foo.bundle.js, common-foo-bar.bundle.js, and any other required chunks will automatically be registered with WordPress for you.

npm i -D wordpress-enqueue-chunks-webpack-plugin

With Webpack

const { WordPressEnqueueChunksPlugin } = require('wordpress-enqueue-chunks-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new WordPressEnqueueChunksPlugin({
      assetsDir: 'path-to-your-built-scripts',
      phpScriptDir: 'where-the-php-script-should-go',
      context: 'theme',
      namespace: 'my-theme-js',
      delimiter: '-',
    }),
  ],
  ...
}

With WordPress

use function WordpressEnqueueChunksPlugin\registerScripts;

// register all scripts
registerScripts();

// register specific scripts
registerScripts(['foo', 'bar']);

// args passed to wp_register_script can be filtered
add_filter('wpecp/register/foo', function($args) {
  array_push($args['deps'], 'media-editor', 'jquery');
  return $args;
});

wp_enqueue_script('my-theme-js-foo');