I have a chunk I'm naming in a dynamic import as follows:

const FileAttachments = React.lazy(() => import(
    /* webpackPrefetch: true */
    /* webpackMode: "lazy" */
    /* webpackChunkName: "file-icons" */
    "Widgets/FileAttachments"));

This is a large chunk and it's fine it if takes awhile to load (it's rarely used and has a perfectly sensible fallback) and similarly for social-icons. How do I specify the priority and override the default maxsize I've set in webpack config. I tried adding this

        cacheGroups: {
            'file-icons': {
                maxSize: Infinity,
                priority: -100,
            },
            'social-icons': {
                maxSize: Infinity,
                priority: -70,
            },
         }

But that actually caused me to no longer have a chunk with the name file-icons. Maybe that's expected because it was merged with another chunk but I don't really understand if I'm doing this right. Or do I have to use a regexp to specify a cacheGroup if I want to override the default options for a chunk (I was hoping to let webpack do it's think and split the chunks where it made sense while also lowering the priority and increasing the size maximum).

It's possible that this question doesn't even really make sense because, I admit, I don't have a good grip on how the cacheGroups and chunk names work and when I should name them etc.. etc..