What are module, chunk and bundle in webpack?

Question

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

{
  entry: {
    foo: [\'webpack/hot/only-dev-server.js\', \'./src/foo.js\'],
    bar: [\'.         


        

Answer 1

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.