Webpack is a function

// Env's parameters are merged with our webpack.config.js configuration to get the final options passed into webpack
function compiler(options) {
  // 1. Verify the validity of the parameters
  validateSchema;
  // 2. Add some default parameters webpack supports 0 configuration
  WebpackOptionsDefaulter;
  // 3. Generate compiler
  compiler = new Compiler(options.context);
  // 4. The Node environment plugin allows compiler to read and write files in the enhanced version of FS
  NodeEnvironmentPlugin; // compiler.inputFileSystem = compiler.outputFileSystem = fs
  // 5. Mount the hook through the plugin we passed and execute the apply method
  // The code will be executed when the webpack is ready
  plugin.apply(compiler);
  // 6. Handle options mount some plug-ins
  new WebpackOptionsApply().process();
  // 7. Check callback
  // 8 Compiler is returned
  return compiler;
}
Copy the code

2. WebpackOptionsApply

class WebpackOptionsApply {
  process(options, compiler) {
    // 1. Check that the options.target type is Web
    switch (options.target) {
    }
    // 2. Process library externals
    new ExternalsPlugin();
    // 3. Process sourcemap
    options.devtool;
    // Mount the hook
    new EntryOptionPlugin().apply(compiler);
    // Trigger entryOption on compilercompiler.hooks.entryOption.call(options.context, options.entry); }}Copy the code

3. EntryOptionPlugin

class EntryOptionPlugin {
  // This is the entrance
  apply(compiler) {
    Plugin string Array object function plugin string Array object function
    new SingleEntryPlugin(context, item, name);
    new MultiEntryPlugin();
    new DynamicEntryPlugin(); // function}}Copy the code

4. SingleEntryPlugin

// single entry plug-in
class SingleEntryPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap("SingleEntryPlugin".() = > {});
    // Listen to make. When compile is executed, make is triggered and the plugin is executed
    compiler.hooks.make.tapAsync("SingleEntryPlugin".() = > {
        / / rely on
        const dep = SingleEntryPlugin.createDependency(entry, name);
        // Add entrycompilation.addEntry(context, dep, name, callback); }); }}Copy the code

5. Compiler

class Compiler extends Tapable {
  this.hooks = {
    // The absolute path to the root directory of the context project entry is the path to the entry file
    entryOption: new SyncBailHook(["context"."entry"]),
    make: new AsyncParallelHook(["compilation"]), / / make a build
    beforeRun: new AsyncSeriesHook(["compiler"]), / / before operation
    run: new AsyncSeriesHook(["compiler"]), / / run
    beforeCompile: new AsyncSeriesHook(["params"]), / / before compilation
    compile: new SyncHook(["params"]), / / compile
    afterCompile: new AsyncSeriesHook(["compilation"]), // Compile complete
    thisCompilation: new SyncHook(["compilation"."params"]), // Start a new compilation
    compilation: new SyncHook(["compilation"."params"]), // Create a new compilation
    normalModuleFactory: new SyncHook(["normalModuleFactory"]),
    contextModuleFactory: new SyncHook(["contextModulefactory"]),}run(callback) {
    // Compile the final callback
    const finalCallback = (err, stats) = > callback(err, stats);
    const onCompiled = (err, compilation) = > {};
    this.hooks.beforeRun.callAsync(this.(err) = > { / / before operation
      this.hooks.run.callAsync(this.(err) = > { / / run
        this.readRecords((err) = > {
          this.compiler(onCompiled); // Call compiler to start compiling
        });
      });
    });
  }

  compiler(callback) {
    A normal module factory was created before the compilation was created
    const normalModuleFactory = new NormalModuleFactory();
    const params = {normalModuleFactory}
    this.hooks.normalModuleFactory.call(normalModuleFactory);
    this.hooks.beforeCompile.callAsync(params, (err) = > {
      this.hooks.compile.call(params);
      const compilation = this.newCompilation(params)
      // Trigger the make event
      this.hooks.make.callAsync(compilation, (err) = >{})})}newCompilation(params) {
    const compilation = new Compilation(this);
    // Trigger the hook
    this.hooks.thisCompilation.call(compilation, params);
    this.hooks.compilation.call(compilation, params);
    returncompilation; }}Copy the code

conclusion

2. Execute the webpack(options) function to get the compiler parameter - add the default parameter - generate the Compiler object mount fs property has the ability to read files (node plug-in) - mount configuration Plugins - Mount plug-ins (depending on the type of entry) - SingleEntryPlugin registers make event 3. Execute compiler.run() - run beforeRun => run => Execute Compiler method - Compiler method initializing compilation parameters (creating normal module factories) => BeforeCompile => newCompilation(creating Compilation objects) => Trigger make events => Execute events registered in SingleEntryPlugin ==> createDependency dependency ==> AddEntry addEntry ==> module....Copy the code