Quick Tip: Creating a custom webpack configuration file

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: