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?
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
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".
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With