webpackcommonschunkplugin

What does "children" refer to in CommonsChunkPlugin config


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?


Solution

  • 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".