Overview of how WebPack works

Webpack is known for its ease of use, treating it as a black box and only caring about its exposed configuration. This section takes you inside the black box to see how Webpack works.

The basic concept

Before you understand the Webpack principle, you need to master the following core concepts to facilitate your understanding:

  • Entry: Entry, the first step in the build that Webpack performs will start with Entry, which can be abstracted into input.
  • Module: Module, in Webpack everything is a Module, a Module corresponds to a file. Webpack recursively finds all dependent modules starting from the configured Entry.
  • Chunk: a Chunk is a code block. A Chunk is composed of multiple modules for code merging and splitting.
  • Loader: module converter, used to convert the original content of a module into new content as required.
  • Plugin: The extension plug-in broadcasts corresponding events at specific times in the Webpack construction process. The plug-in can listen for these events and do corresponding things at specific times.

Generalization process

The running flow of Webpack is a sequential process, from start to finish:

  1. Initialization parameters: read and merge parameters from configuration files and Shell statements to get the final parameters;
  2. Start compiling: initialize the Compiler object using the parameters obtained in the previous step, load all the configured plug-ins, and execute the object’s run method to start compiling.
  3. Determine entry: find all entry files according to the entry in the configuration;
  4. Module compilation: Starting from the entry file, call all configured Loader to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have gone through this step;
  5. Complete module compilation: After using Loader to translate all modules in step 4, obtain the final content of each module after translation and the dependencies between them;
  6. Output resources: assemble chunks containing multiple modules one by one according to the dependency between the entry and modules, and then convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content.
  7. Output complete: After determining the output content, determine the output path and file name based on the configuration, and write the file content to the file system.

In the above process, Webpack will broadcast a specific event at a specific point in time, the plug-in will execute a specific logic after listening for the event of interest, and the plug-in can call the API provided by Webpack to change the running result of Webpack.

Process details

The Webpack build process can be divided into the following three phases:

  1. Initialization: start build, read and merge configuration parameters, load Plugin, instantiate Compiler.
  2. Compilation: issued from Entry, the corresponding Loader is successively called for each Module to translate the file content, and then the Module depends on the Module is found, and the compilation process is carried out recursively.
  3. Output: Combine compiled modules into chunks, convert chunks into files, and output them to the file system.

If only one build is performed, the above phases will be executed one at a time in sequence. However, when listening mode is enabled, the flow changes to the following:

Many events occur during each major phase, and Webpack broadcasts these events for Plugin use, as described below.

Initialization phase

The event name explain
Initialization parameter Read and merge parameters from configuration files and Shell statements to arrive at the final parameters. This process also executes plug-in instantiation statements in the configuration filenew Plugin().
Instantiate the Compiler Initialize the Compiler instance with the parameters obtained in the previous step, and Compiler is responsible for listening to files and starting compilation. The Compiler instance contains the complete Webpack configuration, and there is only one Compiler instance globally.
Load the plug-in Call the plug-in’s Apply method in turn, allowing the plug-in to listen for all subsequent event nodes. A reference to the Compiler instance is also passed to the plug-in to facilitate the plug-in’s invocation of the API provided by Webpack through compiler.
environment Start applying node.js-style file systems to Compiler objects to facilitate subsequent file finding and reading.
entry-option Read the configured Entrys and instantiate a corresponding EntryPlugin for each Entry to prepare for the recursive parsing of the Entry.
after-plugins Call all the apply methods of the built-in and configured plug-ins.
after-resolvers After initializing the resolver, the resolver is responsible for finding the file in the specified path in the file system.

Compilation phase

The event name explain
run Start a new compilation.
watch-run Similar to Run, except that it starts compilation in listening mode, and in this event you can get information about which files have changed causing a new compilation to restart.
compile This event is used to tell the plug-in that a new compilation is about to start, along with the compiler object.
compilation When Webpack is running in development mode, a new Compilation is created whenever a file change is detected. A Compilation object contains the current module resources, compile-build resources, changing files, and so on. The Compilation object also provides many event callbacks for plug-ins to extend.
make After a new Compilation is created, the files are read from Entry, compiled according to the file type and Loader configuration, and then found out the files that the file depends on, and compiled and parsed recursively.
after-compile Completion of a Compilation execution.
invalid This event is triggered when a file does not exist, a file compilation error, etc., and does not cause Webpack to exit.

During compilation, the most important events are the Compilation events, because the compilation stage calls the Loader to complete the conversion operation of each module. The compilation stage also includes many small events, which are as follows:

The event name explain
build-module Use the corresponding Loader to convert a module.
normal-module-loader After converting a module with Loader, acorn is used to parse the converted content and output the corresponding abstract syntax tree (AST) to facilitate code analysis after Webpack.
program Starting from the configured entry module, analyze its AST when encounteredrequireWhen importing other module statements, it will be added to the list of dependent modules, at the same time to find out the new dependent module recursive analysis, and finally make clear the dependency of all modules.
seal After all modules and their dependent modules are converted by Loader, Chunk generation starts based on the dependency relationship.

The output stage

The event name explain
should-emit All the files that need to be exported have been generated, asking the plug-in which files need to be exported and which files do not.
emit Once you have determined which files to output, execute the file output, which can be retrieved and modified here.
after-emit The file output is complete.
done Successfully complete the compilation and output process once completed.
failed If you encounter an exception in the compile and output process that causes Webpack to exit, you will go directly to this step, and the plug-in can obtain the specific cause of the error from this event.

In the output stage, the converted results of each module and their dependence relations have been obtained, and related modules have been combined together to form a Chunk. In the output stage, the corresponding template will be used to generate the final file content to be output according to the type of Chunk.

Excerpted from Webpack