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.jsfile into the root directory of our plugin.
- Step 2: require the
defaultConfigthat comes with the package.
- Step 3: require the
getWebpackEntryPointsfunction. This ensures that the scripts package can detect and compile our blocks.
- Step 4: In the
- add the
defaultConfigusing the spread operator.
- Add an
- 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.
Resources to learn more:
- Developer Blog: How webpack and WordPress packages interact
- @wordpress/scripts package reference
- Webpack Documentation: Entry Points