Manual chunks function

[lukastaegert]

This PR contains:

• bugfix
• feature
• refactor
• documentation
• other

Are tests included?

• yes (bugfixes and features will not be merged without tests)
• no

Breaking Changes?

• yes (breaking changes will not be merged unless absolutely necessary)
• no

List any relevant issue numbers:
Resolves #2688, resolves #2336

Description

This will allow the manualChunks option to be a function. If that is the case, all module ids are passed to this function. If this function returns a string, the given module and all its dependencies are added to the manual chunk with the given name.

This makes it possible to e.g. create vendor chunks via

manualChunks(id) {
  if (id.includes('node_modules')) {
    return 'vendor';
  }
}

All combinatorics should work, if they don't, please let me know. There also should not be any issues any more if some of the files are dependencies of other files.

[tivac]

@lukastaegert you're awesome, thanks so much for this!

[philipwalton]

@lukastaegert thanks so much for working on this!

One question, you said:

If this function returns a string, the given module and all its dependencies are added to the manual chunk with the given name.

I'm assuming here that you mean all its dependencies not already in their own chunks, correct? E.g. I'm assuming it would be possible to put all npm dependencies into their own chunks, even if they have cross references to other npm dependencies, correct?

[lukastaegert]

Yes, you are correct. I was not sure how to express this well without going too much into technical details. The way this works is that each time you return a string, the string is assigned to the module as a label. Then in a later stage when the manual chunks are created, we start with each labelled module and then assign the same label to all its dependencies unless the dependency already has a label.
There are some edge cases with shared dependencies where it would be a matter of ordering if a non-labeled dependency ends up in one chunk or another but in general it should work quite well.

[clintwood]

@lukastaegert really appreciate this PR.

One question my manualChunks function returns 'vendor' yet I am getting an outputted chunk with a name vendor-<hash>. I was expecting an unhashed manual chunk name - is this expected?

[lukastaegert]

Yes, the return value just replaces the [name] placeholder in your output.chunkFileNames property. If you do not want the hash, you have to change the pattern in output.chunkFileNames which contains the hash by default.

[clintwood]

Thanks - appreciate the quick response!

[philipwalton]

@lukastaegert thanks for the clarification. I'm trying it out now, and it works great!

[MichaelRando]

Yes, the return value just replaces the [name] placeholder in your output.chunkFileNames property. If you do not want the hash, you have to change the pattern in output.chunkFileNames which contains the hash by default.

How does one apply the hash conditionally? I've wanted to separate the preload chunk from normal chunks and thought this function was my key; but I got number ordered chunk names when I tried it, which are less optimal cache-wise.

[lukastaegert]

Different naming patterns are not yet implemented but there is an issue around this that I hope we will be able to address at some point: #2793