Webpack interview knowledge

Webpack process

1. Initialize parameters

The final parameters are read and merged from configuration files and shell statements

2. Start compiling

Initialize the Complier object with the parameters obtained in the previous step, load all configuration plug-ins, and execute the object’s run method to start compiling

3. Determine the entrance

Locate all entry files according to the entry in the configuration

4. Compile the module

Start from the import file, call all configured Loader to translate the module, find the module that the module depends on, and then recurse this step until all the import dependent files have gone through this step.

5. Complete the compilation

After using Loader to translate all modules in Step 4, the final translated content of each module and all dependencies are obtained

6. Export resources

According to the dependency between the entry and modules, the chunk is assembled one by one containing multiple modules, and then each chunk is converted into a file and added to the output list. This step is the last chance to modify the output content

7. The output is 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

The core concepts of WebPack

  • Entry: Specifies the entry module that WebPack starts building from and calculates directly or indirectly dependent modules or libraries.
  • Output: Tells Webpack how to name the output file and the output directory
  • 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: As a result of coding split, we can package some codes into a single chunk, such as some common modules, to eliminate duplication and make better use of caching. Or load some function modules on demand to optimize the load time. In webpack3 and before, we used CommonsChunkPlugin to split some common code into a chunk and load it separately. In webpack4 CommonsChunkPlugin is deprecated and SplitChunksPlugin is used
  • 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.

The Webpack compilation process has two core concepts, complier and compliation

  • Complier: is responsible for listening and starting files. The complier object contains all webpack configurations. There is only one complier object globally
  • Compliation: When WebPack runs in developer mode, whenever a file change is detected, a new instance of Compliation is created, containing the current resource module and compiled resources, changed files, etc. The Compliation object also provides event callbacks for the plug-in to extend

Webpack plugins and loaders are implemented

Some of the principles of Webpack are simple

  • Loader: its workflow is to read a file in the form of a string (buffer), parse and convert it, and then hand it to the next link for processing. All loaded modules will be converted into codes that CAN be recognized by JS, so as to complete module integration
  • Plugin: WebPack will trigger Tapable hook events when compiling code. All the plug-in does is find the corresponding hook and attach its own task, which is the registration event, so that when WebPack builds, the registration event will be executed as the hook is triggered.

Tapable

Tapable provides a unified plug-in interface (hook) type definition for WebPack and is the core library of Functionality for WebPack