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.
- add the
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:
- Ryan Welcher live streams on Twitch every Thursday at 10:30 ET / 15:30 UTC.
- Previous streams recordings are available on YouTube