What does 'Chunks' mean in CLI output?

Question

Command I run:

$ webpack --config webpack.config.js -p --progress

This is the result I get. What do chunks mean? Why do they change sometimes? If I understand it right, the more chunks the better.

But I can't see same amount of files. If I have 0-1-2 chunks in every entry point, where are chunks' files then? I have only entry points

Many

Single

My WP config:

module.exports = {
    context: path.resolve(__dirname, '..'),
    entry: {
        index: 'index.wp',
        home: 'home.wp',
        vendors: [
            'react',
            'react-dom',
            'querystring',
            'react-router',
        ]
    },
    output: {
        path: path.resolve(__dirname, '_distro_'),
        publicPath: '/',
        filename: '[name].[chunkhash:5].js',
        pathinfo: true,
        chunkFilename: 'chunk-[name].[chunkhash].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendors", 'index', 'home'],
            minChunks: 1 // << I play with this value and # of chunks change
        }),
    ],
}

WP GitHub https://github.com/webpack/webpack/issues/6387

Answer 1

What is a chunk in webpack?

Since webpack creates a dependency graph of all of your dependencies, it needs a way [and format] to output this information to disk. Since a graph is kind of hard to represent in a file format, webpack uses an encapsulation known as a "Chunk". A Chunk is just an array of modules, that when "rendered" outputs your bundles.

A Chunk also, however, has its own graph. When you refer to the ID's that you mention in the build output, this is stating the dependent relation between one chunk and another.

For example, when you use code splitting, webpack will create a separate chunk that will load asynchronously.

But now this means there are two bundles and they must be loaded in the right way:

[Chunk (parent)] 
    ====> [Chunk (depends on existence of parent for this to load)]

The ID's are the parent to child relationship which allow plugins like html-webpack-plugin to know which order to inject your bundles into the HTML. We call this the "chunk graph". You can learn more about this information at https://webpack.js.org/glossary/#c