The difference between bundle, chunk and module

Concept

bundle

bundle Generated by many different modules , Contains the final version of the source file that has been loaded and compiled

chunk

chunk It is mainly used internally to manage the bundling process . The output is generated by bundle from chunk form , There are several types entrychild etc. . Usually ,chunk Direct and bundle Corresponding , But some configurations do not produce a one-to-one relationship , for example MiniCssExtractPlugin Can be obtained from chunk Pull out css file , Generate... Separately bundle. Generate chunk There are three ways ,entry、 Dynamic loading 、splitChunks Extract common code

Module

module Is a discrete function block , Compared with the complete program, it provides a smaller contact surface . It's usually module Provides abstraction and encapsulation boundaries , Make every module in the application have a clear purpose

summary

The above are the official concepts given by the official website , I have to say, officially , Here we briefly summarize the general differences .
module In fact, it is a file or passed within a file import It can be regarded as a module, That is to say, any file that can be imported and exported is a module

and bundle And chunk The relationship between , Is roughly chunk yes webpack Terms that depend on bundling during packaging .bundle It can be understood as right chunk compile / The final output after processing such as compression and packaging .