How Webpack and WordPress packages interact

[bph]

During the discussion Issue #8
@andrewlimaza commented

"The main hurdle is the tooling around here and not fully understanding webpack. We tweak the wordpress/scripts webpack to adjust the entry and output points to fit our file structure. What we need is to output to assets/js and entry point would be /blocks (with various subfolders).

Right now, it nukes everything in the assets/js whenever you use wp-scripts start or build. Not sure if this is a NPM version thing or if there's a setting we can use to keep pre-existing files (other .js files for plugin frontend/admin etc) and just rebuild the files we need (i.e. blocks.build.js).

Also a standardized file structure for blocks (within a plugin) would help us, this is something we're working on for our own team (not paving the way for WP) but with the ever evolving tools and understanding of blocks we need to neaten this up internally as we built blocks before wp-scripts was a thing or we just didn't know about it (I can't remember 5 years ago what was our thought approach). We have moved over to wp-scripts ever since which made things easier but still gets confusing to troubleshoot this when things don't work. Our goal now is to to move to a set file structure and webpack config in upcoming plugins that already have shortcodes and other /js files. We have made some workarounds but I don't feel that these are ideal."

There definitely a need to elaborate on the interaction between Webpack and WordPress scripts, to guide developers through the build process and make adopting some tools easier. What do you think should be covered in a first blog post about it?

[ryanwelcher]

@bph I'd like to take this on. There are a lot of items to unpack here but I think this ties into the work I've down with both the scripts and create-block packages.

[bph]

Awesome! How would you approach it, @ryanwelcher Do you have a preliminary outline in mind?

[ryanwelcher]

I'd probably start with the relationship between the @wordpress/scripts package and the DependencyExtractionPlugin to clarify:

1. Why developers can use the import syntax without needing to npm install any @wordpress/* packages when using the build processes provided by the @wordpress/scripts package.
2. Where the index.asset.php file comes from and what purpose it serves.

Then I'd most likely look at the @wordpress/scripts package, explain how it works out of the box and then look at some examples on how to extend/modify the webpack configuration to :

1. Add additional entry points
2. Modify the entry point where block are stored
3. Look at custom output paths

Also a standardized file structure for blocks (within a plugin) would help us

This could be addressed by talking about the @wordpress/create-block package as it provides a suggested structure, but would that be better suited as a separate article where we could also talk about custom templates?

[bph]

This discussion was converted to an issue for the project.

• How Webpack and WordPress packages interact #79

Please continue feedback etc. there. This discussion is locked.

[bph]

Closed the discussion after post was published by @ryanwelcher How webpack and WordPress packages interact