Dear friends, good afternoon! I had a dream last night, in which my future girlfriend asked me what is the principle of webpack compilation? I a leng, Webpack compilation principle is what ah? Suddenly I become a light back to reality, only then have this article, friends if you have any questions, you can speak freely in the comments, tonight at 10 o ‘clock, I will take your message to dream life…
Webpack’s job is to compile (build, package) the source code from the entry file into the final code. In the middle through webpack packaging, packaging process is compiled
The whole process can be roughly divided into three steps:Initialize the
,Compilation (most important)
,The output
Initialize the
During the initialization phase webPack merges CLI parameters, configuration files, and default configurations to form a final configuration object.
CLI parameters: Using a command line tool, some parameters may be added, such as:
npx webpack --mode=development --config xxx
Copy the code
Configuration file: webpack.config.js
Default configuration: For example, entry./ SRC /index.js
The process of configuration is completed by relying on a third-party library yargs, which is integrated with configuration. The initialization phase is relatively simple, and is mainly a necessary preparation for the subsequent compilation phase. For now, it can be simply understood as: the initialization phase is mainly used to produce a final configuration.
compile
1. Create the chunk
Chunk is a concept in webPack’s internal construction process, translated as a chunk, which represents the collective name of all dependencies found through a portal, for example: The entry module (./ SRC /index.js) depends on the a module (./ SRC/A.js), which in turn depends on the B module (./ SRC/B.js). Three modules can be found by analyzing the dependency relationship of one entry module, so the index.js, A.js and B.js are referred to as a chunk
Create a chunk based on the entry module (default:./ SRC /index.js). Each chunk has a name, which means that there may be multiple chunks.
By default, there is only one chunk, and each chunk has at least two attributes:
Name: The default value is main
Id: a unique id. In a development environment, the ID is the same as name. In a production environment, the ID is a number starting from 0.
2. Build all dependent modules Let’s walk through the diagram briefly:
Code:
// Module name:./ SRC /index.js (not loaded)// Module contents:
console.log("index");
require("./a");
require("./b");
Copy the code
- Step 1: Build from the entry module file (./ SRC /index.js). The module file has a path, and the entry module file path is
./src/index.js
It checks this path to see if the current module has been loaded. Note: instead of running the module, it looks at the module record table (the blue table on the right) to see if the module has been loaded. The first check is empty. - Step 2: If there is a record in the module record sheet, it indicates that the module has been loaded. If no record is recorded, the next step is continued, indicating that the module needs to be loaded
Check the./ SRC /index.js module and find that it has not been loadedCopy the code
- Step 3: Read the contents of this module, which is actually a string
// Read content (string)
console.log("index");
require("./a");
require("./b");
Copy the code
- Step 4: Syntax analysis of the content of the module, tree structure traversal, find all dependencies, and finally generate AST abstract syntax tree
require("./a");
require("./b");
Copy the code
AST online test tool: astExplorer.net/
- Step 5: Record the analyzed dependencies in the Dependencies array
// record dependency ["./ SRC /a.js","./ SRC /b.js"]Copy the code
- Step 6: Replace dependent functions. What does that mean? That is to say, change the dependent places into a code format, will
require
Instead of_webpack_require
That will beDependent modules
Instead ofThe module id
console.log("index");
_webpack_require("./src/a.js");
_webpack_require("./src/b.js");
Copy the code
- Step 7: We call the replaced code the transformed module code and save it in the module record table
- Step 8: / SRC /a. Js: / SRC /b. Js: / SRC /b. Js: / SRC /b. Js: / SRC /b. Js: It will, after the completion of a module, such as processing and processing module, a module dependencies b again finally processing module, index module dependencies b at this point it will find b module in the treatment of a module dependencies b module has been loaded, then the index module dependencies module b is not on to the next step processing, directly to the end.
This is the webpack compilation process, and the ultimate goal is to form a module record sheet. Below is a schematic diagram of several modules loaded in chunk through the entry file after the above compilation process. Each module records the transformed code.
3. Generate Chunk assets
After the second step is complete, a list of modules is generated in chunk, which containsThe module id
andThe code after module transformation
. Next, WebPack generates a list of resources based on the configuration for Chunk, i.echunk assets
, the resource list can be understood as the file name and file content generated into the final file.
The Chunk hash is a hash string generated based on the contents of all chunk assets
Hash: An algorithm that converts a string of arbitrary length into a string of fixed length without changing the original content.
Brief:
4. Merge Chunk Assets
Merge assets of multiple chunks together to generate a total hash
Output emit
Webpack will use the FS module in Node (file processing module) to generate the corresponding files from the total assets generated by compilation.
The total process
When the webpack command is pressed, the file starts initialization, and all parameters are fused to form a final configuration object. Then the configuration object is delivered to the compiler for compilation, and the interdependent modules are found through the entry module to form a module list. Then Webpack will generate a resource list for Chunk according to the configuration. Then, the resources generated by each chunk are combined into a complete resource, and a complete hash value is generated, and finally output to a file according to the complete resource list.
Involved in the term
- A module in a Webpack can be a file of any content, not just JS
- Chunk: a chunk of webpack building blocks. A chunk contains multiple modules that are extracted from the entry module through dependency analysis
- Bundle: After chunk builds the module, a list of chunk resources will be generated. Each item in the list is a bundle, which can be considered as the final generated file
- Hash: The hash value generated by combining all the contents of the final resource list
- Chunkhash: Hash value jointly generated by the contents of the resource list generated by chunk
- Chunkname: indicates the name of chunk. If this parameter is not specified, main is used
- Id: the unique id of chunk. If the chunk is built in a development environment, it is the same as chunkName. If the build is in production, use a number starting from 0
📌 finally
If there are any mistakes in the webpack compilation principle, please give me your comments and be sure to listen to your comments
Finally, you can also follow my public account: “Front-end Hunter”, or add my wechat (wKavin) to communicate privately.