[Feature]: Replace webpack and linting config with @wordpress/scripts

[ampersarnie]

The feature

@wordpress/scripts has advanced greatly since we originally set out to create a tool for internal usage that allows us to manage our ways of working. Because of this quick and often progression there are times where we can fall behind the standards being laid out and implemented into WordPress.

Project seeking should remain the same, however it may mean the individual project structure may change to take advantage of various different features from @wordpress/script and WordPress Core. Any of those discussions and change decisions should be logged in this ticket.

Affects the following tickets:

• [Bug]: Update @wordpress/dependency-extraction-webpack-plugin package #116 → Would not be required as it is already implemented within @wordpress/scripts
• https://github.com/bigbite/engineering-strategy/issues/15 → Additional accessibility linting is available already with @wordpress/scripts

[g-elwell]

I've created a draft PR to explore some of this here.

I first attempted to pull in @wordpress/scripts configs and merge them with what we had, but realised quite quickly that this was going to be difficult, adding more complexity on top of an already complex set up. For example, the block.json detection alone required significant additional config to integrate with the way we manage projects via webpack.

So, I've been experimenting with a different approach, using concurrently to run wp-scripts in each project folder. This works quite well but meant I needed to begin going through all of the features from the build-tools and adding them back in.

In terms of what we gain by doing this, I've noticed several useful eslint rules especially around react, a11y, jsdoc and some specific to WordPress. I've specifically not turned off any rules, except for changing @wordpress/no-unsafe-wp-apis to a warning instead of an error, but I suspect we will review all of the rule additions/changes anyway and test across several projects.

There are also a couple of key differences between wp-scripts and our build tools whilst going through this process:

• Built files are located in a different area, I suggest we adapt to the WordPress way of working here
• wp-scripts doesn't lint during the build process, I've added this back in so it works as we're used to

This is very much still a work in progress but if anyone wants to check it out please do:
https://github.com/bigbite/build-tools/tree/test/wp-scripts-concurrently

[scottblackburn]

@scottblackburn to share an example plugin from 2U to test this

[ampersarnie]

Update on this: work on the release hit a couple of issues with the Unit Tests. There's been some difficulty getting them passing due to @wordpress/dependency-extraction-webpack-plugin. Code runs perfectly fine, and examples that I'm using are working as expected, but the unit tests have issues with the package that I'm not able to resolve as of writing.