CODEWITHSUNDEEP
webpackfrontendcommonschunkplugin
Green
Green

Reputation: 30805

What does 'Chunks' mean in CLI output?

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 enter image description here

Single enter image description here

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

Upvotes: 3

Views: 816

Answers (1)

Sean Larkin
Sean Larkin

Reputation: 6420

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

Upvotes: 5

Related Questions