Some concepts of webpack



There are many kinds of packaging tools. In practice, webpack is often contacted. At present, some Chinese documents are not in line with English documents, and some concepts are relatively scattered. Therefore, we should focus on this.

  • Origin
  • My GitHub

Dependency Graph

Whenever one file depends on another, webpack treats this as a dependency. This allows webpack to accept non code resources, such as images or fonts, and provide them as dependencies to your application.

When webpack processes your program, it may start with a series of modules defined on the command line or configuration file. Starting with the entry file, webpack recursively builds aDependency graph(dependency graph), thisDependency graphContains each module required by the application and generates one or morebundle, which can be loaded by the browser.


  • runtimeandmanifestData, basically all the code that webpack uses to connect modular applications when the browser is running.
  • It contains the loading and parsing logic required to connect modules as they interact. This includes the logic to connect modules that have been loaded into the browser and to delay loading modules that have not yet been loaded.


  • manifestAs a noun, the Chinese meaning is: a manifest of a ship or an airplane
  • When the compiler enters, parses, and maps your application, it keeps detailed information on all your modules. This data set is called“manifest”。
  • When the package is complete and sent to the browser,runtimeWill passmanifestTo parse and load modules.
  • Whatever module syntax you choose, thoseimportorrequireStatements are now converted to__webpack_require__Method, which points to the module identifier.



  • The function of separated chunks with smaller contact surface than the complete program makes verification, debugging and testing easy.
  • Well written modules provide reliable abstraction and encapsulation boundaries, which form a coherent design and clear purpose.


  • As a noun, it means: (1) bundle, pack, tie.
  • Generated from a number of different modules, containing the final version of the source file that has been loaded and compiled.
  • Personal understanding is that some associated packages are packaged into a file.


  • As a noun, it means: chunk, chunk, discourse component.
  • Specific terms in this webpack are used internally to manage the packaging process.
  • bundlesfromchunksComposition, where there are many types (such as entrances).
  • Usually,chunksAnd outputbundlesDirect correspondence, however, some configurations do not produce a one-to-one relationship.

Bundle Splitting

  • This process provides a way to optimize the build, allowing webpack to generate multiplebundle
  • It can isolate each package’s changes without affecting other packages.
  • By using the browser’s cache, the amount of code that needs to be redistributed and downloaded by the client can be reduced.

Code Splitting

Dividing code into differentbundles/chunks, you can then load on demand instead of loading a single, all inclusivebundles

Tree Shaking

  • Eliminate redundant and unused code.
  • Webpack analyzes the use of various import statements and import codes to determine the actual use of dependencies, and delete the part that does not belong to “tree”.

Output Filename

Webpack provides a way to usesubstitution(replaceable template string), template the file name through the bracketed string.

Template describe
[hash] Hash of the module identifier. If a module is modified, the hash generated by other modules will change.
[contenthash] The hash of the file content is different from each other. Only the hash of a file that has changed its content will change.
[chunkhash] Hash of chunk content. If a file changes, its associated file hash will also change.
[name] The name of the module
[id] Module identifier
[query] Query of the module, such as the string after the file name
[function] Method to return the file name

reference material

  • Webpack
  • Webpack Glossary
  • What are module, chunk and bundle in webpack?

Recommended Today

On the theoretical basis of SRE

What is SRE? When I first got into contact with SRE, many people thought that it was a post with full stack capability in Google and could solve many problems independently. After in-depth exploration, it is found that SRE can solve many problems, but there are too many problems. It is difficult for a post […]