How to correctly name the chunk group in Webpack?

user_15388164 0
Viewed 72

In my app I use dynamic imports to create additional chunks. Then, as I'd like them to result in readable-ish names, I configure chunkFilename based on the file paths:

output: {
    chunkFilename: pathData => {
        const chunkName = cleanFilename(pathData.chunk.id);
        pathData.chunk.name = chunkName;
        return `${chunkName}.chunk.js`;
    },
},
optimization: {
    chunkIds: 'named'
},

This works very well, giving the names that I'd like.

However, later in the compilation (in a plugin) I'd like to access compilation.namedChunkGroups and do something with them, but I've run into a bit of an issue: only my entrypoint results in a named chunk. These other chunks are unnamed, accessible only through compilation.chunkGroups.

This isn't necessarily the end of the world, as I can access the proper chunk name (set above) with (say) compilation.chunkGroups[x].chunks[0].name, but this feels a bit silly.

Is there a correct way to set the chunk group name or have it inferred?

Edit: Seems you can't even set chunkGroup.options.name and have it turn into a named ChunkGroup.

Edit 2: Found that Webpack magic comments work at making the chunk group (& chunk) named, but that's genuinely awful to author so that's out of the question. This needs to be done from the Webpack config itself, not source.

webpack
1 Answers
user_153881640
Related