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.

CodePudding user response：

Apparently, magic comments are the only way to provide chunk names.

As Webpack offers no in-built way to generate these, I wrote a very small Babel plugin to generate magic comment chunk names from the import path. It can be found here: https://github.com/rschristian/babel-plugin-webpack-chunk-name-comments

I do wish this could just be inferred.