Analysis of processOptions processing Options and entry function of Web pack source code

Let's open bin/cli.js
According to the Options returned last time

processOptions(options)
This is easier to read because of the foundation of the last time. The general logic is as follows

• Define an empty outputOptions object first

The same logic as last ifArg, argv is still a

function ifArg(name, fn, init) { if (Array.isArray(argv[name])) { if (init) init(); argv[name].forEach(fn); } else if (typeof argv[name] !== "undefined") { if (init) init(); fn(argv[name], -1); } }

There is only one way to satisfy
info-verbosity
If satisfied, execute fn, init a series of functions

ifArg("info-verbosity", function(value) { outputOptions.infoVerbosity = value; });

The direct result of this function is

outputOptions.infoVerbosity = 'info';

The effect of outputOptions.infoVerbosity is to log

For example, if the watch is satisfied

if (outputOptions.infoVerbosity !== "none"){ console.log("\nwebpack is watching the files...\n"); }

When you npm run dev, it will appear on the page

webpack is watching the files...

That's a sentence

For other logic classes, you can call ifArg to add data to the outputOptions object, and then type different logs according to the value of the attribute
This is what the processOptions function does

None of this affects the main process

const webpack = require("webpack"); let compiler; compiler = webpack(options); // ... compiler.run(compilerCallback);

Start webback

な に (Nani) went through a search
In webpack/lib/webpack.js

Why did you find lib first

Let's read on

Open webpack.js

const Compiler = require("./Compiler"); // ... module introduction function webpack(options, callback) { // Error detection const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchema, options); if(webpackOptionsValidationErrors.length) { throw new WebpackOptionsValidationError(webpackOptionsValidationErrors); } let compiler; // Multi configuration if(Array.isArray(options)) { compiler = new MultiCompiler(options.map(options => webpack(options))); } // Single configuration else if(typeof options === "object") { /*...*/ } else { throw new Error("Invalid argument: options"); } if(callback) { /*...*/ } return compiler; } exports = module.exports = webpack; webpack.WebpackOptionsDefaulter = WebpackOptionsDefaulter; // ... property mount function exportPlugins( /*...*/ ) exportPlugins( /*...*/ ); exportPlugins( /*...*/ );

It can be divided into the following parts:

1. Introduction of tool module

2. Error detection of configuration object

3. Processing by multi configuration or single configuration

4. Execute callback function

5. Mount the introduced module on the webpack function

6. Output some plug-ins

3 December 2019, 07:14 | Views: 6053