About Webpack Detailed series articles (fourth article)

1. Webpack Basic Concepts

Entry: Ingress, Webpack the first step in performing the build starts with Entry and can be abstracted into input.
Module : modules, in the Webpack all modules, a module corresponding to a file. Webpack will recursively identify all dependent modules starting from the configured Entry.
Chunk: code block, a Chunk is composed of multiple modules for code merging and segmentation.
Loader: module Converter for converting the original contents of the module to new content as required.
Plugin: extension Plug-in, in the Webpack build process at a specific time the opportunity to broadcast the corresponding event, the plug-in can listen to the occurrence of these events, at a specific time to do the corresponding things.

2. Process overview

• Initialization parameters: Read and merge parameters from the configuration file and Shell statements, and obtain the final parameters;
• Start compiling: Initializes the Compiler object with the parameters from the previous step, loads all the configured plug-ins, and executes the object's Run method to start compiling;
• Identify the entry: Find all the entry files according to the entry in the configuration;
• Compile the module: from the portal file, call all the configured Loader to translate the module, and then find out the module depends on the module, and then recursive this step until all the input dependent files are processed by this step;
• Completion of the module compilation: After the 4th step using Loader translation of all modules, the final content of each module is translated and the dependencies between them are obtained;
• Output resources: According to the dependencies between the portal and the module, assemble the Chunk with multiple modules, then convert each Chunk to a separate file to add to the output list, which is the last chance to modify the output content;
• Output completion: After determining the output content, the output path and file name are determined according to the configuration, and the contents of the file are written 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 certain logic after hearing the event of interest, and the plug-in can invoke the API provided by Webpack to change the results of the Webpack operation.

3. Detailed process

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

• Initialize: Start build, read and merge configuration parameters, load Plugin, instantiate Compiler.
• Compile: From Entry, for each module serial call corresponding Loader to translate the file content, and then find the module dependent module, recursively to compile processing.
• Output: The compiled Module group is synthesized Chunk, the Chunk is converted to a file, and output to the file system.

3.1 Initialization phase

Event name	explain	/
Initialize parameters	The parameters are read and merged from the configuration file and the Shell statement, and the final parameters are drawn.	webpack-cli/bin/webpack.js:436
Instantiate Compiler	Initializes the Compiler instance with the parameters from the previous step, Compiler is responsible for file monitoring and startup compilation. The Compiler instance contains a full Webpack configuration with only one Compiler instance globally.	Webpack/lib/webpack.js:32
Loading plugins	Call the plugin's apply method in turn, allowing the plug-in to listen to all subsequent event nodes. A reference to the compiler instance is also passed to the plug-in to facilitate the plugin to invoke the API provided by the Webpack via compiler.	Webpack/lib/webpack.js:42
Environment	Started applying the node. JS style file system to the compiler object to facilitate subsequent file searches and reads.	Webpack/lib/webpack.js:40
Entry-option	Read the Entrys of the configuration, instantiate a corresponding entryplugin for each Entry, and prepare for the recursive parsing work of the Entry later.	webpack/lib/webpack.js:275
After-plugins	The Apply method for all built-in and configured plug-ins is called out.	webpack/lib/webpackoptionsapply.js:359
After-resolvers	After the configuration is initialized, Resolver,resolver is responsible for locating files in the file system for the specified path.	webpack/lib/webpackoptionsapply.js:396

3.2 Compilation phase The

event name	explanation	/
Run	starts a new compilation.	webpack/lib/webpack.js:194
watch-run	is similar to run, except that it is a compilation that starts in listening mode, in which case You can get to what files have changed causing a new compilation to be restarted.
compile	This event is to tell the plug-in that a new compilation will start and bring the compiler object to the plug-in.	webpack/lib/compiler.js:455
compilation	when Webpack is running in development mode, whenever a file change is detected, a The second new compilation will be created. A compilation object contains the current module resources, compile-generated resources, changed files, and so on. The compilation object also provides a number of event callbacks for plugins to extend.	webpack/lib/compiler.js:418
make	A new compilation is created and will begin reading from Entry , compiles the file according to the file type and configuration Loader, compiles and then finds the file that the file depends on, recursively compiles and parses.	webpack/lib/compiler.js:459
after-compile	Once compilation execution is complete.	webpack/lib/compiler.js:467

In the compilation phase, the most important is the number of compilation events, because in the compilation phase calls the Loader to complete the conversion of each module, in the compilation phase includes a lot of small events, respectively:

Event name	explain	/
Should-emit	All the files that need to be output have been generated, asking the plugin which files need to be output and which do not.	webpack/lib/compiler.js:146
Emit	After determining which files to output, execute the file output, where you can get and modify the output.	webpack/lib/compiler.js:287
After-emit	The file output is complete.	webpack/lib/compiler.js:278
Done	Successful completion of a completed compilation and output process.	webpack/lib/compiler.js:166
Failed	If an exception is encountered during the compilation and output process that causes Webpack to exit, it jumps directly to this step, and the plug-in can obtain a specific cause of the error in this event.

In the output stage, we have obtained the result of the conversion of each module and its dependence, and combined the relevant modules together to form a Chunk. In the output phase, depending on the type of Chunk, the corresponding template is used to generate the final file content to be output.

4. Code Flow 4.1 node_modules/.bin/webpack-cli

• Obtaining parameters in the shell by Yargs
• Integration of parameters and shell parameters in Webpack.config.js to the options object
• Call Webpack-cli/bin/webpack.js to start compiling and packaging
• A compiler object is returned in Webpack-cli/bin/webpack.js and the Compiler.run () is called
• Lib/compiler.js, the Run method triggers the Before-run, run two events, and then reads the file through the ReadRecords, which is packaged by compile, which instantiates a compilation class
• Triggering events such as before-compile, compile, make, etc. when packaging
• The Make event triggers the Singleentryplugin listener function to invoke the Compilation.addentry method
• This method accomplishes two things by calling its private method _addmodulechain: Obtaining the corresponding module factory and creating the module according to the type of the module; building the module
  • Invoke the dependency between loader processing modules
  • Abstracts loader processed files into abstract syntax tree AST through ACORN
  • Traverse the AST to build all the dependencies of the module
• Call compilation's finish and Seal method

4.2 Key Events

• Entry-option: Initialize Options
• After-plugins
• After-resolvers
• Environment
• After-environment
• Before-run
• Run: Start compiling
• Watch-run
• Normal-module-factory
• Context-module-factory
• Before-compile
• Compile
• This-compilation
• Compilation
• Make: Recursive analysis of dependencies and build of dependencies starting from entry
• Build-module: Loading files with loader and build module
• Normal-module-loader: Compiled with Acorn for loader loaded files, generate abstract syntax tree AST
• Program: Begins a traversal of the AST, triggering the call require event when require is encountered
• After-compile
• Should-emit
• Need-additional-pass
• Seal: All dependent build complete, start to optimize the chunk (Extract public module, add hash, etc.)
• Optimize-chunk-assets: Optimizing Code
• Emit: Output each chunk to the result file
• After-emit
• Done
• Failed
• Invalid
• Watch-close

Reference

Plugins:https://github.com/webpack/docs/wiki/plugins
How to write a Plugins:https://github.com/webpack/docs/wiki/how-to-write-a-plugin
Webpack Write a plugin: https://www.webpackjs.com/contribute/writing-a-plugin/
Webpack Write a loader:https://www.webpackjs.com/contribute/writing-a-loader/

About Webpack Detailed series articles (fourth article)