splitChunks.chunks option is too limited

Feature request

Please feel free to close if I’ve missed something, but after spending a couple days trying to upgrade to webpack 4 (CommonsChunkPlugin -> optimization.splitChunks), it seems like while we’ve gotten a lot of great additional behavior, we’ve also lost a really important one: I can no longer specify which chunks I want to contribute to the splits.

With CommonsChunkPlugin, I had a vendor chunk that I specified be extracted explicitly from entryA.js via the chunks property. Of course, the vendor chunk was not extracted from any of the async chunks (which is a great feature of splitChunks!), but I have a few other entry points that I don’t want split up, and I don’t know how to do it:

  • I have entryB.js, which should be a standalone js file for its own page.
  • I have workerA.js, workerB.js, and workerC.js, which don’t share a runtime environment with the main thread (no window or document, for example), so these must be standalone files. Yet, say workerA.js imports underscore—well, I have no way for it not to be split up if I want entryA.js split up. Unless I’m missing something, this seems like a huge issue.

What is the expected behavior?
I would like to have a chunks property inside a cacheGroup that allows us to specify the entry file the splits should be taken from, or at least have a way to say ‘all (initial and async) except these files.’

What is motivation or use case for adding/changing the behavior?
I’m not sure I see a reasonable path forward here otherwise; maybe I should create multiple webpack configs and put the non-split files in those?

How should this be implemented in your opinion?
Bringing back the Commons-style chunks property to some extent would be lovely.

Are you willing to work on this yourself?

Author: Fantashit

1 thought on “splitChunks.chunks option is too limited

  1. @chrisdothtml your problem seems very similar to mine, and this fixed it for me. prior to this, i was using an array of webpack configs, but with this, if you do:

    chunks: (chunk) => chunk.name !== 'c'

    that should work. in my example from my previous comment, that snippet took out common chunks from:

    • other async chunks (as represented by !chunk.canBeInitial())
    • one of our entry files (represented by chunk.name === <my_entry_file_name>). but we actually have a few entry files—they just need to have all their dependencies except the one represented by <my_entry_file_name>.

    if i’m understanding correctly, this should cover it?

Comments are closed.