webpackwebpack-4webpack-splitchunkssplitchunksplugin

Any Webpack splitchunks.name as a function documentation other than from the website?


with the introduction of webpack 4, splitChunks.name is used to define the name of a split chunk. here, the documentation says the key can be mapped to a function for custom naming:

https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksname

It takes in params module, chunks, cacheGroupKey. the documentation for these params is kind of lacking, but I can use intuition for some. ie, cacheGroupKey pertains to the keys defined in splitChunks.cacheGroups. i think chunks are the chunks that share common code that is a part of the cacheGroupKey chunk but there's no official docs about that anywhere.

so, my question is does anyone have any insights on what those three parameters are referring to?


Solution

  • Each parameter is an object provided by webpack, each with a ton of parameters. Here's what information I found useful in facing this problem:

    chunks is a list of Chunk objects, each having a ton of properties (the most useful for naming being chunk.name and chunk.hash). Each chunk has modules, each module has chunks, etc. SplitChunksPlugin will generate these lists of chunks in a way that will optimize web performance, so unless you're an advanced user you won't have to worry about what chunks are with what chunks.

    This function will return the desired name of the chunk. So, you can use JavaScript logic and the chunk.name and chunk.hash values to create a JS string that you want your the chunk name to be, and return that string, which will set the chunk name. Hope this helps!