@wordpress/scripts: Support path-based chunk names in FixStyleWebpackPlugin

[bosconian-dynamics]

Closes #32791.

Description

Changes FixStyleWebpackPlugin's chunk name to styleFile name resolution to account for chunk names which might contain forward slashes. This gives users overriding webpack.config.js the option of using path-based entry names by setting optimization.splitChunks.cacheGroups.style.name.

It's possible that the optimization.splitChunks.cacheGroups.style.name function could be set in @wordpress/scripts' webpack.config.js file as well, but I am not familiar enough with splitChunks or the style cacheGroup that I am comfortable asserting that my simple implementation (see the test configuration in the next section) will cover any range of edge-cases.

How has this been tested?

• npm run lint-js
• Created, built, and verified functional bundles in a WordPress plugin overriding @wordpress/scripts' webpack.config.js as follows:

const path = require( 'path' );

const config = require( '@wordpress/scripts/config/webpack.config.js' );

config.entry = {
 'blocks/foo/index': path.resolve( process.cwd(), 'src', 'blocks', 'foo', 'index.js' ),
 'frontend/accordion': path.resolve( process.cwd(), 'src', 'frontend', 'accordion.js' ),
};

config.optimization.splitChunks.cacheGroups.style.name = ( module, chunks, group_key ) => {
 const delimeter = config.optimization.splitChunks.cacheGroups.style.automaticNameDelimiter;
   
 return chunks[0].name.replace(
   /(\/?)([^/]+?)$/,
   `$1${group_key}${delimeter}$2`
 );
};

module.exports = config;

Screenshots

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code has proper inline documentation.

[gziolo]

@bosconian-dynamics - thank you for the fix 👍🏻

It seems to work well in my testing for the use case you shared. It shouldn't have any impact on the default behavior.

We plan to migrate to webpack 5 in the upcoming week. wepack 5 no longer needs FixStyleWebpackPlugin plugin at all.