What does "children" refer to in CommonsChunkPlugin config

Question

I'm trying to wrap my head around the configuration options for webpack's CommonsChunkPlugin. These options include a boolean children property. Could you explain what happens when this is set to true, vs. when it's set to false? This documentation says "If true all children of the commons chunk are selected," but the page never defines "children of the commons chunk." Are the children the chunks that include the commons chunk? Or perhaps the modules that the commons chunk includes? Furthermore, what are the implications of "selecting" the children?

Fairchild

The page never defines the meaning of "select" either... – Umeko

Answer 1

I think the phrasing here is a bit misleading. If you look at the related example on the same documentation page it becomes clearer.

Once you start with code splitting, the term chunk can refer to

• your entry chunks, which have children created by the split points in your code,
• the chunks created by your split points (i.e. the children of your entry chunks), or
• the commons chunk(s) you merge into with the CommonsChunkPlugin.

Now, as you can see in the docs, a commons chunk you merge code into with the CommonsChunkPlugin can either be a new commons chunk or an existing chunk. The latter is achieved by specifying the name of an existing chunk as the "name" property of the commons chunk in the CommonsChunkPlugin options. In my experience, however, you can only specify existing chunks which are are entry points of your application. For example, if your application entry point has the name "app", the following CommonsChunkPlugin options should merge common code in the children of "app" into the "app" chunk.

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  children: true
})

If, instead, you wanted to create a new commons chunk for the common code of the children of "app", you would do so with the following code:

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  filename: 'common-code.js',
  children: true,
  async: true
})

Coming back to your quote from the docs

If true all children of the commons chunk are selected

the word "commons chunk" should probably be replaced by "entry chunk".

Hypaesthesia

Do you happen to know what "select" means in this context? – Umeko

The way I understand it, "select" refers to whether a child chunk is even considered when determining the modules to be moved into a commons chunk. For example you have an app with multiple split points. Each split point creates a child chunk. You decide to extract common logic into a commons chunk. By specifying "children: true" you tell the plugin to automatically extract modules from all child chunks into the commons chunk, given they fulfill the conditions determined by the minChunks option. Thereby, all child chunks were "selected" for the commons chunk. – Hypaesthesia

So, using children: true, if I have 2 chunks loaded asynchronously using split points (that, as I understand, are children chunks), but those 2 chunks both use the same dependency, this dependency (a dependency of the children) would be "selected" to be in the commons chunk (that is loaded synchronously). – Umeko

Not quite, I think. The term "selected" refers to the child chunks, not the code/modules inside these chunks. I.e. If a chunk isn't selected non of its code can go to the commons chunk. In that sense, setting children: true is equivalent to setting chunks: ['child_1', ..., 'child_n'], i.e. explicitly selecting all child chunks. In your example, the outcome is the same. However, imagine you also set minChunks: 3 (i.e. code must exist in at least three chunks to be moved to the commons chunk). The deps won't go to the commons chunk, despite the chunks being selected. – Hypaesthesia