Webpack is usually used from the command line, but webpack is also introduced and called by a nodeJS module. The command line also encapsulates a layer on top of this.

const webpack = require('webpack');
const options = require('./webpack.config');
const compiler = webpack(options);

compiler.run((err, stats) = > {});
Copy the code

The above code shows that Webpack is a function and returns an instance of the Compiler, then running the run method opens Pandora’s box.

Webpack function

  1. Pass in the exported configuration items from our configuration file when we call the Webpack function
  2. Merge incoming configuration items with incoming configuration items from the command line (having written the NodeJS command line tool should know how to receive command-line arguments)
  3. Instantiate the Compiler and pass in the merged configuration items
  4. Registers all plug-ins passed in by the configuration itempluginThis is just iterating through the executionpluginThe real meaning of the Plugin is at every stage of the WebPack compilation processhooksAs an extension, calling apply registers to listen for the hook functions in webPack
  5. Return Compiler instance

Compiler class

Compiler is defined as a class

  1. The constructor defines a number of attributes, including the configuration items passed in that are assigned to private attributes, and initializes a number of hooks instances

  2. The focus is on the run method, which starts compiling when it executes

    • Entry gets the entry file in the incoming configuration item
    • Start compiling the package from the entry file
    • Go to the source by path fs
    • After obtaining the original source code, loader will be baptized first. The specific operation of Loader will be explained in details in the following articles
    • The source code returned by loader will find the Require node in the syntax tree in the ast traversal to Webpack, and will be added to the dependencies of the current module by reassembling the absolute path introduced by require
    • ModuleId = moduleId; dependencies = _source = moduleId; The relative path of the current module is the moduleId, and the absolute path of other modules introduced by the current module is pushed into dependencies. _source is the new code returned by the abstract syntax tree of the current module
    • Compiling a module is a recursive operation
    • It then iterates through the dependencies array of the current module, compiling the module recursively, starting in step 3 above
    • According to the dependency between the entry and module, a Chunk is formed. Chunk is also an object, containing properties such as name and modules. For example, multi-entry applications or asynchronously loading modules generate different chunks
    • Finally, a Chunk is pushed into the Chunks through dependencies, and finally the Chunks are traversed and written to disk via FS

conclusion

  1. Initialization parameters: Read and merge parameters from configuration files and Shell statements to arrive at the final configuration object
  2. Initialize the Compiler object with the parameters obtained in the previous step
  3. Load registered plug-ins for all configurations
  4. Execute the run method to start compiling
  5. Find the entry file based on the entry in the configuration, or possibly multiple entries
  6. From the entry file, the configured Loader used is called to compile the module
  7. Find the module’s dependencies and recurse to compile the module
  8. A Chunk is assembled according to the direct dependencies between the entry file and the module
  9. Each Chunk is then converted into a separate file to add to the output list
  10. Determine the output path and file name according to the configuration, and write the file to the disk