Webpack workflow

Webpack defines the set of events for the different phases of the packaging process. In the process of packaging, by calling pre-registered events in the event set to achieve specific processing functions, to complete the custom packaging

A plugin is an abstract interface that performs specific custom tasks through the WebPack event mechanism

Core object

  • Compiler: The complete WebPack environment configuration object.
  • Complilation: Builds an object for a resource version. Whenever a file change is detected, a new compilation is created to generate a new set of compilation resources; The complilation object contains the current module resources, compile generated resources, change files, and trace dependency status information. It also provides a number of critical callbacks for the plug-in to customize
Plugin execution process
  • After WebPack initialization, all plugins are initialized when the plugins property is read
  • The processing functions are registered with the webpack stages by calling the plug-in’s Apply function (applying the complier parameter)
  • Webpack calls the functions registered by the Plugin at each stage in the sequence of events that are triggered (apply the Compilation parameter to get the currently compiled object)

Event mechanism

Webpack implements the event mechanism (registration, triggering) through the Tapable library: see Tapbale for details

Webpack main object

Plugin basic structure
class Plugin {
    constructor(option) {}
    // Add a listener for the event
    apply(complier){}}Copy the code
Compiler (Compiler instance)
class Compiler {
    constructor(context) {
        // Define the hooks names for each phase (lifecycle)
        this.hooks = Object.freeze({
            done: new AsyncSeriesHook(["stats"]),// Execute after compiling
            beforeRun: new AsyncSeriesHook(["compiler"]),
            run: new AsyncSeriesHook(["compiler"]),Execute before the compiler starts reading records
            emit: new AsyncSeriesHook(["compilation"]),// This is executed before generating files to the output directory, calling the compilation parameter
            afterEmit: new AsyncSeriesHook(["compilation"]),// execute after generating files to the output directory
            compilation: new SyncHook(["compilation"."params"]),// Execute plug-ins after a compilation creation
            beforeCompile: new AsyncSeriesHook(["params"]),
            compile: new SyncHook(["params"]),// Before a new compilation is created
            make:new AsyncParallelHook(["compilation"]),// Execute before completing a compilation
            afterCompile: new AsyncSeriesHook(["compilation"]),
            watchRun: new AsyncSeriesHook(["compiler"]),
            failed: new SyncHook(["error"]),
            watchClose: new SyncHook([]),
            afterPlugins: new SyncHook(["compiler"]),
            entryOption: new SyncBailHook(["context"."entry"])});// WebpackOptions: webpack.config.js configuration information
        this.options = {}
        // Webpack builds the function
        this.webpack = webpack
        // Context path {string}
        this.context = context
        // ...
    }
    // Create the Compilation object
    newCompilation(params) {}
    / / watch to monitor
    watch() {}
    // Package the process (i.e., complete lifecycle)
    run(callback) {}
    // Compile process
    compile(callback) {}
    // Generate a package file
    emitAssets(compilation, callback){}}Copy the code

A detailed look at www.webpackjs.com/api/compile…

Compilation

Each time a new compilation (or a new build), such as chunks, is listened for, a new compilation is created and the compilation is performed

Similar to the use of Compiler, there is a pointer to Compiler in the property

A detailed look at www.webpackjs.com/api/compila…

A custom Plugin
class MyPlugin {
    // Custom configuration
    constructor(options) {
        this.filename = options.filename
    }
    apply(complier) {
        // context is the directory where the instruction is run
        const context = compiler.options.context // process.cwd()
        
        // Add execution functions (hooks) at each stage
        compiler.hooks.emit.tap('pluginName'.(complication) = > {
            // (1) Execute in compiler hook stage
            
            // (2) execute in the compliation hook phase
            compilation.hooks.additionalAssets.tapAsync('name'.(cb) = > {
                const content = 'hello world'
                // Method 1:
                compilation.assets['a.txt'] = {
                    source() { return content },
                    size() {return content.length}
                }
                // Method 2:
                compliation.assets['b.txt'] = new RawSource(content)
                // Method 3:
                compliation.emitAsset('c.txt'.new RawSource(content))

                cb()
            })
        })
    }
}
Copy the code