Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 738
Bryan Avatar asked Mar 02 '17 15:03

Bryan


1 Answers

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

like image 124
Felix Avatar answered Oct 09 '22 16:10

Felix