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

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();
    } else if (typeof argv[name] !== "undefined") {
        if (init) init();
        fn(argv[name], -1);

There is only one way to satisfy
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

The most important is the sentence
const webpack = require("webpack");
let compiler;
compiler = webpack(options);
// ...;

Start webback

So here's the problem. Webback came from there

な に (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( => 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

Tags: Javascript Webpack npm

Posted on Tue, 03 Dec 2019 07:14:27 -0500 by TheNookie