How Webpack and WordPress packages interact

[bph]

Discussed in #15

^{Originally posted by bph October 13, 2022}
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?

[bph]

@ryanwelcher post a preliminary outline in this comment

I'd probably start with the relationship between the @wordpress/scripts package and the [DependencyExtractionPlugin](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin) to clarify:

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.
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 :

• Add additional entry points
• Modify the entry point where block are stored
• 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?

[ryanwelcher]

Draft is (finally) ready for review - https://docs.google.com/document/d/1qsfWjkWyAyRcoLHaEM8WelDSrXhhzVZXOnwjKcxPBD0/edit#

[marybaum]

Got a couple of things on my plate today. Can I look early-ish tomorrow?

[ryanwelcher]

This is ready for 2nd review - https://developer.wordpress.org/news/?p=1226&preview=1&_ppp=305a6df22c

[ryanwelcher]

@marybaum do you think you'll have some time to review the post today?

[marybaum]

Omg thank you for saying something! Absolutely!... from my phoneOn Apr 24, 2023, at 8:30 AM, Ryan Welcher ***@***.***> wrote: @marybaum do you think you'll have some time to review the post today? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[marybaum]

Done!

[bph]

@ryanwelcher seems you are ready to publish! ✅

Here is the pre-publish checklist

• Post Title in Sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Props added?
• 🙌 Publish! 📗
• add Props for reviews to #props channel in WP Slack
• Share post on Twitter, or LInkedIN or other social networks.

[bph]

Post was published by @ryanwelcher How webpack and WordPress packages interact