What are module, chunk and bundle in webpack?

I can't understand concepts like module, chunk and bundle very well.

{
  entry: {
    foo: ['webpack/hot/only-dev-server.js', './src/foo.js'],
    bar: ['./src/bar.js']
  },
  output: {
    path: './dist',
    filename: '[name].js'
  }
}

In the above configuration, are only-dev-server.js and foo.js both chunks? Are foo and bar both bundles? Are foo.js and bar.js both modules?

Solution 1:

After spending a day digging into this I wanted to provide what I believe is a slightly more accurate answer. The webpack team has published a useful (and tricky to notice) glossary.

I believe the confusion about chunks and bundles is that the terms can refer to the same thing, but should be used at different points in the webpack process.

webpack glossary definitions

Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.

Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don't yield a one-to-one relationship.

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

(emphasis added by me)

Interpretation

I summarize the difference as: a chunk is a group of modules within the webpack process, a bundle is an emitted chunk or set of chunks.

The distinction is useful when talking about webpack processes as they are occuring. As modules are chunked together, they can change significantly (especially during plugin processing), so it isn't accurate to call them bundles at that point, the chunks may not even be emitted as bundles in the final output! Then after webpack is finished it is useful to have a term to refer to all of the emitted, final files (bundles).

Your example

So for your example

{
  entry: {
    foo: ["webpack/hot/only-dev-server.js","./src/foo.js"],
    bar: ["./src/bar.js"]
  },
  output: {
    path: "./dist",
    filename: "[name].js"
  }
}

Modules: "webpack/hot/only-dev-server.js", "./src/foo.js", "./src/bar.js" ( + any other modules that are dependencies of these entry points!)
Chunks: foo, bar
Bundles: foo, bar

In your example your chunks and bundles have a 1:1 relationship, but this isn't always the case. For example adding source maps would mean you have a 1:2 relationship between a chunk and a bundle.

Resources

webpack glossary
webpack stats data documentation
Issue 970 - Concepts - Bundle vs Chunk

Solution 2:

A bundle is some related code packaged into a single file.

If you don't want all of your code be put into a single huge bundle you will split it into multiple bundles which are called chunks in webpack terminology. In some cases you will define how your code is split chunks yourself (with an entry that points to multiple files and an output file template like [name].[chunkhash].js), in other cases webpack will do it for you (e.g. with CommonsChunkPlugin).

A module is a JS module (e.g. a CommonJS or an ES6 module). Because internally webpack deals only with modules, all non-js assets are also wrapped in modules. So if you have some .sass files for example, you will import/require them in JS files for them to be bundled, but if you use ExtractTextWebpackPlugin it will output a separate CSS bundle for those files.

Solution 3:

I was looking for some more details about splitting bundle into small parts and found your question… as well as I went so far with this topic and found this from a good article that I really recommend it for you:

A chunk is code which will break apart from main bundle that is main.js and form it’s own file known as chunk file. There are two types of chunks viz. sync and async. Sync chunks are loaded synchronously with main.js and you would see element in source code. Async chunks are loaded on demand (lazy loaded) and you would see network request for async chunk files in developers tool. These chunks are spitted from main.js based on some conditions and we need to tell that to the Webpack. This is done through Webpack plugin known as splitChunksPlugin.

More here: https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312