Quick Tip: Creating a custom webpack configuration file

Example that adds variation-icon.js file to the build process
Ryan Welcher on YouTube Shorts. – Also available on TikTok

Ryan Welcher started a recording YouTube Shorts also available on TikTok. Here is a transcript and code example of his first one. Subscribe to his YouTube channel so you won’t miss any new streams or shorts. For TikTokers, follow his account: @ryanwelchercodes

There have been many times when I wanted to have my build process compile my blocks, but also add something custom, for example registering a slot fill or a block variation. 

Configuring webpack can be difficult, but thankfully the WordPress scripts package makes customizing the build process pretty straightforward.

  • Step 1: add a webpack.config.js file into the root directory of our plugin. 
  • Step 2: require the defaultConfig that comes with the package. 
  • Step 3: require the getWebpackEntryPoints function. This ensures that the scripts package can detect and compile our blocks. 
  • Step 4: In the module.exports object,
    • add the defaultConfig using the spread operator. 
    • Add an entry object, 
    • spread the results of getWebpackEntryPoints, and then 
    • add any custom entry points as needed.

Code Example from the video

Example that adds a variation-icon.js file to the build process.

// Import the original config from the @wordpress/scripts package.
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

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

// Add any a new entry point by extending the webpack config.
module.exports = {
	...defaultConfig,
	entry: {
		...getWebpackEntryPoints(),
		'variation-icon': './src/variation-icon.js',
	},
};

Code language: JavaScript (javascript)

The code example is also available on GitHub

Resources to learn more:

Related Posts