16-analysis of Webpack source of packaging unrelated flow carding

A point was previously omitted, as follows:

if (Options.plugins && Array.isarray (options.plugins)) {    compiler.apply.apply (compiler, Options.plugins);}

After the FS module of the compiler object is mounted, the incoming plug-in is loaded, which is before the built-in plug-in is loaded.

The plugin section is explained separately, so this place is temporarily skipped.

Once the built-in plug-in is complete plugin, the compiled callback function is detected:

 if   (callback) { if  (typeof  callback!==" function ") throw  new     Error ("Invalid argument:callback"  //  detect if there is a watch option  if  (options.watch = = = true  | | (Array.isarray (options) && options.some (o => O.watch)) {Const Watchoptions  = Array.isarray (options)? Options.map (o = o.watchoptions | | {}): (Options.watchoptions | |         {});  return   Compiler.watch (Watchoptions,    callback); } compiler.run (callback);}  

The construction of scaffolding production mode of VUE-CLI a callback function is obviously passed in Build.js:

/**/ })

The callback function here is mainly to output some packaging information, including the status of packaging files, packaging error prompts, packaging completion tips and so on.

Temporarily regardless of the callback, the compiler is returned directly to the precompiled Webpack.js file.

Back to the long-lost bin/webpack.js, the following process is simplified after the source code as follows:

Try{Compiler=webpack (options);} Catch(ERR) {/**/ }//--progress for output packaging informationif(argv.progress) {varProgressplugin = require (".. /lib/progressplugin "); Compiler.apply (Newprogressplugin ({profile:argv.profile}));}//callback function for output packaging informationfunctionCompilercallback (err, stats) {/**/ }//If a watch is packaged, the process continues to monitorif(Firstoptions.watch | | options.watch) {/**/ }//Direct CompilationElseCompiler.run (compilercallback);

After returning the compiler object, the package operation was not done at this time, but everything was ready and the remaining steps were as follows:

1, detect--progress instruction, this instruction is used to output progress to the console

2. Detect the watch parameters in the--watch instruction or configuration file, if any, then continuously detect the relevant files after packing, and call the packing operation immediately.

3. No watch is configured to package the operation directly, call the callback function after packaging is finished.

　　

Progress this can be tried on their own, can be imagined as the installation program that interface.

Watch Command function

After the process is packaged and not exited, when the portal file is modified and saved, the prompt output information is packaged and refreshed immediately.

Here, for the time being watch.

The final step is to package the operation:

Compiler.run (Compilercallback);

The incoming callback function is only responsible for output packaging information, the source code is as follows:

functionCompilercallback (err, stats) {//Clean Cache in non-watch mode    if(!options.watch | |err)    {Compiler.purgeinputfilesystem (); }    //Error Handling    if(ERR) {/**/ }    //Output Packaging Information    if(Outputoptions.json) {process.stdout.write (Json.stringify (Stats.tojson (outputoptions),NULL, 2) + "\ n"); } Else if(Stats.hash!==Lasthash) {Lasthash=Stats.hash; varStatsstring =stats.tostring (outputoptions); if(statsstring) process.stdout.write (statsstring+ "\ n"); }    if(!options.watch &&stats.haserrors ()) {Process.exitcode= 2; }}

Stats is the information generated after packaging, formatted after the output through Prcess,stdout.write, the output is the bottom of the console.log, the above figure in the package complete information is output through this line of code.

　　

So far, everything that has nothing to do with the packaging process is done, and the rest of the content is focused on the Compiler.run call.

16-analysis of Webpack source of packaging unrelated flow carding