This is the 13th day of my participation in the More text Challenge. For details, see more text Challenge

preface

In the process of learning WebPack, it is inevitable to encounter some WebPack-specific concepts (terms), WebPack official has written a special “glossary” document.

The most common terms are Module, Chunk and Bundle. These three concepts are very important. To learn WebPack well and understand webpack documents, you must understand these three concepts, which are also explained in the official documents.

This article will focus on Modules, chunks, and bundles. Other concepts will not be covered until you have a look at the official glossary.

Module, Chunk, and Bundle

The official explanation

  1. Module

Modules are discrete chunks of functionality that provide a smaller interface than a complete program. Well-written modules provide solid boundaries of abstraction and encapsulation that allow each module in an application to have a coherent design and a clear purpose.

  1. Chunk

This WebPack-specific term is used internally to manage the bundle process. An output bundle consists of blocks with several types (such as Entry and Child). Typically, blocks correspond directly to output bundles, but some configurations do not produce a one-to-one relationship.

  1. Bundle

Bundle: A Bundle is generated by a number of different modules and contains the final version of a source file that has been loaded and compiled.

WTF!!!!!! . W (゚ dare゚)w

See more confused……

I understand it

The webPack configuration sample code is not written here, assuming that the WebPack project already has the ability to package various JS, CSS, and so on, the following is a simple description.

There is an index.js in the project that references index. CSS.

index.js

import './index.css'
Copy the code

There is also header.js in the project that introduces nothing.

After the Webpack is packaged, WebPack generates object files index.bundle.js, index.bundle. CSS, and header.bundle.js.

Some might use the common name xxx.bundle.js, and this format is used here to distinguish the source file from the final package file.

Module

The Module is actually the source code that we write. The first modules we write are index.js, header.js, and index. CSS.

Chunk

Chunk is the hardest to understand. Chunk is only a product of the build process. You can think of it as finding all the dependencies introduced in a JS and bundling them into that JS to build something called Chunk.

For example, during the webpack build process, index.js will merge with index.css to form a chunk. Since nothing is introduced in header.js, it becomes another chunk by itself, so during the build process, there are two chunks.

Bundle

The Bundle is a little bit easier to understand, it’s the end product of the package, and the project file that we’re going to deploy is the Bundle. Back in our example, the packages for index.bundle.js, index.bundle. CSS, and header.bundle.js are our bundles.

The three relations

We can see that none of these are 1-to-1 relationships.

In fact, all three of them are things that implement the same set of logic, but they have different names in different processes.

Module is the source code before the build, Chunk is the Bundle product during the build, and Bundle is the code that runs after the build.

reference

  1. What is the difference between a Module, chunk, and bundle in WebPack? (Highly recommended)
  2. What are module, chunk and bundle in webpack?
  3. A glossary of official documents

series

Using WebPack5 (0) : Concepts Using WebPack5 (1) : Starting Using WebPack5 (2) : Configuring Multiple environments Using WebPack5 (3) : Loading the CSS Using WebPack5 (4) : Load resource file Webpack5 use (5) : Babel translation JS code use (6) : optimization