.22-analysis of Webpack source compile flow-event Flow compilation overview

Well, finally to this place ...

newcompilation (params) {    //  ...    this. Applyplugins ("This-compilation", compilation, params);     //  to    Console.log (this. _plugins[' compilation '].length);     this. Applyplugins ("Compilation", compilation, params);     return compilation;}

MMP, there are 31 functions, estimated to be written to next year.

Here first to comb all the source of the incident, after detection, all from webpackoptionsapply, back to that horrible module, combing the following:

class Webpackoptionsapply extends Optionsapply {constructor () {super (); } process (options, compiler) {// ...        if(typeofOptions.target = = = "string") {            // ...            Switch(options.target) { Case"Web": Jsonptemplateplugin= Require ("./jsonptemplateplugin"); Nodesourceplugin= Require ("./node/nodesourceplugin"); Compiler.apply (NewJsonptemplateplugin (options.output),//Plugin + 3                        NewFunctionmoduleplugin (options.output),NewNodesourceplugin (options.node),NewLoadertargetplugin (options.target));  Break; // ...            }        }        // ...        //Plugin + 1Compiler.apply (NewEntryoptionplugin ()); Compiler.applypluginsbailresult ("Entry-option", Options.context, options.entry); //plugin +Compiler.apply (/**/ ); Compiler.apply (/**/ ); // ...        //Plugin + 1Compiler.apply (NewTemplatedpathplugin ()); //Plugin + 1Compiler.apply (NewRecordidsplugin ()); //Plugin + 1Compiler.apply (NewWarncasesensitivemodulesplugin ()); // ...        returnoptions; }}

Fortunately all concentrated in one place, so can write journal again.

Here is a place to go before it seems to have left behind:

Compiler.apply (new  entryoptionplugin ()); Compiler.applypluginsbailresult ("Entry-option", Options.context, Options.entry);

This injects the Entry-option event stream and triggers in the next line of code, so go straight in and see the implementation:

functionItemtoplugin (context, item, name) {if(Array.isarray (item)) {return NewMultientryplugin (context, item, name); }    return NewSingleentryplugin (context, item, name);} Module.exports=class Entryoptionplugin {apply (compiler) {//context = Options.context        //entry = Options.entryCompiler.plugin ("Entry-option", (context, entry) = {            //for single-string or array cases            if(typeofEntry = = = "string" | |Array.isarray (Entry)) {                //output file is mainCompiler.apply (Itemtoplugin (context, entry, "main")); }            //objects = multiple entrances            Else if(typeofEntry = = = "Object") {Object.keys (entry). ForEach (Name=compiler.apply (Itemtoplugin (context, Entry[name], name)); }            //function            Else if(typeofEntry = = = "function") {compiler.apply (NewDynamicentryplugin (context, entry)); }            return true;    }); }};

Here, for the string, array, object, function four cases were processed, the first only to see the single string, the rest of the case is explained separately.

A single string will enter the Singleentryplugin plugin:

"Use Strict"; Const Singleentrydependency= Require ("./dependencies/singleentrydependency"), class Singleentryplugin {constructor (context, entry, name) { This. Context =context;  This. Entry =entry;  This. Name =name;    }; Apply (compiler) {Compiler.plugin ("Compilation", (compilation, params) = = {/**/ }); Compiler.plugin ("Make", (compilation, callback) = {/**/ });    }; Static createdependency (entry, name) {//the module has a Isequalresource method to determine whether entry is the sameCONST DEP =Newsingleentrydependency (entry); Dep.loc=name; returnDEP; }}

The introduction of the Singleentrydependency prototype chain is relatively long, and there is no nutrition, out of one, do not paste the source code:

You can see that the module injects two event streams, which are discussed later in the static method.

The first bar ends like this!

.22-analysis of Webpack source compile flow-event Flow compilation overview