1. What are the main links of the Webpack construction process? Please describe the entire Webpack packaging process in as much detail as possible.

Webpack runs in a NodeJS environment and the configuration file follows the CommonJS specification. Its configuration file webpack. Config. Js export an object/function/promise/array. After startup, Webpack will start from entry and recursively parse all modules that entry depends on. After finding a Module, it will perform corresponding conversion according to Loader rules configured in module. rules. The modules that the current Module depends on are parsed. These modules are grouped in the unit of entry, that is, a Chunk. Therefore, a Chunk is the combination of an entry and all its dependent modules. Finally, Webpack converts all chunks into files for Output. Throughout the build process, Webpack performs the logic defined in the Plugin at the right time to optimize the Plugin. The process is as follows:

The compiler is instantiated and plugins, resolverFactory, and hooks are registered. Before reslove, prepare webPack compilation, NormalModuleFactory and ContextModuleFactory 5. Build Module runLoaders to process the source code and get a compiled string or buffer. Generate chunk instantiate chunk and generate chunk graph. Set the module ID and chunk ID. Render chunk resources using different templates. 8. File generation Create target folders and files, write the resources, and print the build informationCopy the code

2. What are the differences between Loader and Plugin? Please describe the idea of developing Loader and Plugin.

Loader: Used to convert module source code. Since WebPack itself only supports JS processing, Loader describes how WebPack handles non-javascript modules and introduces these dependencies in builds. Loader can convert files from different CSS preprocessing to CSS, TS to JavaScript, or inline images to data urls. For example, sas-loader, CSS-loader, style-loader, and file-loader.

  • Loader development: Just like developing middleware pipelines, you can start by creating a new export module, taking source as an input, doing a bunch of processing on the source, and then returning JS code (or following other loaders). 
    module.exports = (source) = >{
    return result(source)
}
Copy the code

Plugin: Plugin is implemented through the Webpack hook mechanism. Compared with Loader, Plugin has wider capabilities. It is designed to address other things that Loader cannot do, from packaging optimization and compression to redefining environment variables, and is powerful enough to handle a wide variety of tasks. Plugin development: The plugin is required to be either a function or an object containing the Apply method. The input parameter is a Compiler object that contains the information needed for the build. At development time, the Emit hook can be accessed through the hooks property in the Compiler, and a hook function can be registered through its TAP method, customizable hook name and mount function. This function takes the compilation packaging context and obtains all file names by iterating through all the keys of assets under compilation. We then get the corresponding content according to the source () method of the key, do some processing on the content, and return it to souce for our plug-in purposes.