Webpack has always been like a familiar stranger. Recently, from the source point of view, through debugging, we finally found the whole line of packaging and unveiled this mysterious veil. Direct step-by-step look at the source code will inevitably be confused, with their own questions to check the source code is much clearer.

Starting from the overall latitude, this article combs the overall process around the following two questions:

1. What are the packaging files produced by WebPack

Let’s start with the first question: what happens when webpack is packaged? Take the simplest example of packaging, remove the code comments, and find a function that executes immediately:

Many articles are based on packaged files, and I’ve always wondered how this file was generated. Although we know that it was generated by WebPack, we don’t know exactly which phase was generated by whom.

The maintemplate.js file contains the generated non-business logic code, as shown in the following figure:

It can be seen that the file generated by webPack is composed of the Runtime runtime (packaging results vary depending on how resources are imported) plus the business code.

Note: For different import modes, the package contents will be different. If asynchronous import modules are used, the package contents will be as follows:

Conclusion: The webpack output file is an immediate execution function, the function content will change depending on how the module is introduced, function parameters are business code module object (file path: file source).

Moving on to the second question, how WebPack generates the package file.

2. How does WebPack generate packaging files

When we execute the line packaging command from the terminal, we go through the following process. I draw a core flow chart (it is clear to go through the whole sequence of steps) :

Detailed overall packaging process:

  1. Check whether webpack-CLI or webpack-command is installed. If so, go to 2. Otherwise, an error message is displayed

  2. Get the configuration parameter options for Webpack, pass the parameter to Webpack, get the compiler instance, and call Compiler.run ().

  3. Register some hooks and call compiler.compile() to start the build, creating the compilation object that will store all the data for this compilation

  4. By the compiler. The hooks. Make callAsync () to trigger the make hooks, singleEntryPlugin to register event, make calls compilation. The addEntry began building blocks, Until all modules have been created (various Loaders perform at this stage)

    4.1. This. Hooks. Make. CallAsync trigger make hooks, perform SingleEntryPlugin event registration (make), calls the Compilation. AddEntry method, add the entry module, began to compile and build

    4.2.AddEntry calls _addModuleChain to add the module to the dependency list and compile the module *

    4.3. In the buildModule method, normalModule. build is called through module.build, and runLoaders(a separate run-loader library) is called when the module is created.

    4.4 Run runLoader, parse the file using JavaScriptParse, compile the AST using Acorn, add the dependencies of the file to the dependency module, and repeat the preceding steps

  5. After completing all dependencies and loaders, hooks are triggered to generate chunks, and a series of plugin optimizations are performed on the chunks, merging the Runtime code with the business code and generating the code to output.

  6. When the resource is ready, the hooks are triggered, and WebPack iterates through compiler. assets to generate all files. AfterEmit is triggered to indicate that the resource output is complete.

The above is the whole core process of Webpack, spent a lot of energy, thank you for your support