@wordpress/scripts: path-based webpack entry points produce inconsist output file structure

[bosconian-dynamics]

Description

When extending @wordpress/scripts' webpack.config.js to add to entry using chunk/entry point names containing forward slashes, the style-{chunk name}.css files produced are output to a directory disparate from the rest of the assets and bundles built for that entrypoint.

Step-by-step reproduction instructions

1. Override @wordpress/scripts' webpack.config.js file to add entrypoints with names including /:

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' ),
};

module.exports = config;

2. Execute wp-scripts build or wp-scripts start.

Expected behaviour

All built chunk bundles and assets are located in the path described by the entry-point name, relative to the output directory. An entry-point named 'blocks/foo/index' should result in src/blocks/foo/style.scss's built asset being output at build/blocks/foo/style-index.css:

Actual behaviour

The respective CSS files end up in a first-level directory separate from all other related assets. An entry-point named 'blocks/foo/index' results in src/blocks/foo/style.scss's built asset being output at build/style-blocks/foo/index.css:

[bosconian-dynamics]

As it turns out, this is simply how Webpack v4's splitChunks automatic naming scheme works. It seems it could be overridden by specifying a splitChunks.name property, but the documentation recommends against doing so in production.

It would be nice if FixStyleWebpackPlugin could support such user-supplied splitChunks naming schemes.