webpack之webpack-cli入口解析篇（片尾附内推）cli工具能帮助我们初始化一个工程，在平常业务中，自己去编

前言

cli工具能帮助我们初始化一个工程，在平常业务中，自己去编写一个cli工具，也是一个必备的能力，因为这样能节省很多人工配置的成本。而学习webpack-cli，我们能更加清楚：

1、webpack-cli能提供什么样的功能

2、如何去编写一个cli工具

webpack-cli思维导图

命令行是如何生效的

当我们没有装webpack-cli时，运行webpack-cli -h会报错command not found: webpack-cli。

当我们全局安装了webpack-cli包时，运行webpack-cli -h。就会有帮助指令显示出来。

究其原因，命令行是如何去读取指令的呢？

如何指定项目运行的指定文件

bin字段的含义：用来指定各个内部命令对应的可执行文件的位置。
如何通过指令定位到项目

当我们全局安装包的时候，每次都会在相应的bin目录下面创建一个软连接文件。

比如看例图：

我们可以发现`bin/webpack-cli`会被指定到对应文件的入口文件。

拿什么去运行脚本呢

完成上面两步仅仅是一个找到指定脚本，但是用什么去运行脚本？

这边引入一个可执行脚本概念：文件的第一行插入#!/usr/bin/env node这句话，作用是指定脚本解释器。这边不展开讲，有兴趣的可以深入了解。

入口文件——cli.js

入口文件cli.js文件分为以下几个步骤，之后的也会按照这几个步骤先把入口文件讲清楚

引入NON_COMPILATION_ARGS常量数组（含义是不需要被编译的参数）
引入import-local（用于判断cli工具是否全局安装）
引入v8-compile-cache(用代码缓存功能，加速实例化)
引入处理错误类的工具函数
根据NON_COMPILATION_ARGS生成不需要编译的命令数组NON_COMPILATION_CMD
引入yargs包来使命令行界面更富交互性
引入config-yargs配置文件，来对yargs做个性化配置
调用yargs的parse方法来处理参数

处理`NON_COMPILATION_CMD`

const NON_COMPILATION_CMD = process.argv.find(arg => {
    // 如果有serve指令，那么将serve从process.argv中移除，生成新数组
	if (arg === "serve") {
		global.process.argv = global.process.argv.filter(a => a !== "serve");
		process.argv = global.process.argv;
	}
	// 根据NON_COMPILATION_ARGS返回不需要编译的指令数组
	return NON_COMPILATION_ARGS.find(a => a === arg);
});

process.argv数组

process.argv其实是命令行一些参数组成的数组。

process.argv的例子

新建argv.js文件 ```js // argv.js console.log(process.argv); ``` 运行指令`node ./argv.js -h`

// 输出结果
['/Users/shuimo/.nvm/versions/node/v10.20.1/bin/node',
  '/Users/shuimo/Documents/source/webpack-cli/argv.js',
  '-h' ]

从上述例子中我们不难看出：

process.argv的第一个索引值：该进程的解释器所在路径，此例中即node所在目录

process.argv的第二个索引值：该文件所在路径

process.argv的其他：一些命令行附加的参数

为什么要移除serve

commit地址如下： github.com/webpack/web…

但是原因我没有看懂，也没有找到？评论中有想法的可以一起探讨。

`NON_COMPILATION_ARGS`数组

const NON_COMPILATION_ARGS = ["init", "migrate", "serve", "generate-loader", "generate-plugin", "info"];

他们对应的指令及作用如下：

webpack-cli init: 初始化一份新的webpack配置文件
webpack-cli migrate: 用于工程中webpack的版本迁移
webpack-cli serve: 运行webpack-dev-server，用于运行程序
webpack-cli generate-loader: 初始化一份新的loader工程
webpack-cli generate-plugin: 初始化一份新的plugin工程
webapck-cli info: 返回一系列当前环境的信息

存在`NON_COMPILATION_CMD`数组

if (NON_COMPILATION_CMD) {
	return require("./utils/prompt-command")(NON_COMPILATION_CMD, ...process.argv);
}

如果存在上述不需要编译的指令，就会调用./utils/prompt-command文件的方法，方法会先检测对应的包是否安装。

如果没有安装，会调用yarn指令去添加@webpack-cli/xxx包

之后，就会执行包相应的逻辑。这里不展开赘述，之后会单独拎出来讲。

`yargs`处理参数

中间有一段配置yargs的就先略过了，有兴趣的可以单独去看一下。

参数处理总流程

// 限制错误栈的数量，最多为30个
Error.stackTraceLimit = 30;

// 错误处理
if (err && output) {
	console.error(output);
	process.exitCode = 1;
	return;
}

// 输出类型的，比如执行-h等
if (output) {
	console.log(output);
	return;
}
// 如果argv中有verbose指，就将display设置成verbose
if (argv.verbose) {
	argv["display"] = "verbose";
}

let options;
try {
	// 对参数进行合法校验，并返回合法参数
	options = require("./utils/convert-argv")(argv);
} catch (err) {
	// 如果参数处理过程中出错，则报错退出
	// ...
}
// 如果出现silent对象，则用 { write: () => {} }对象，否则用process.stdout对象
const stdout = argv.silent ? { write: () => {} } : process.stdout;
// 工具函数，下面细讲
function ifArg(name, fn, init) {...}
// options处理流程，下面细讲
function processOptions(options) {...}
processOptions(options);

从中可以看出，yargs回调中做了三件事情

1、对指定参数进行判断，做部分参数处理。

2、校验参数的合法性。

3、对options进行处理。

工具函数ifArg

function ifArg(name, fn, init) {
	// 判断argv[name]是否是数组
	if (Array.isArray(argv[name])) {
		// 有init，先执行init
		if (init) init();
		// 对数组中的每一项都用fn进行处理
		argv[name].forEach(fn);
	// 非数组，且有值的情况下
	} else if (typeof argv[name] !== "undefined") {
		// 有init，先执行init
		if (init) init();
		// 将值传入fn
		fn(argv[name], -1);
	}
}

看这个工具函数主要干了四件事：

1、判断属性值是否是数组类型的，数组类型的话，就用fn对每个值进行操作。

2、如果不是数组类型，直接当成fn的参数传入。

3、进行每一步之前，会判断有没有init，init显然是个函数，有的话，先执行init。

4、如果属性值不存在什么都不做。

processOptions

processOptions其实主要做了两件事：

1、细致化的处理argv中的参数，并赋值到outputOptions中

2、引入webpack，并用webpack尝试构建

processOptions注释版源码

function processOptions(options) {
		// then对象是一个函数，当成promise来处理。将函数当成参数传入到then中
		if (typeof options.then === "function") {
			options.then(processOptions).catch(function(err) {
				console.error(err.stack || err);
				// eslint-disable-next-line no-process-exit
				process.exit(1);
			});
			return;
		}
		// 获取options的第一个参数
		const firstOptions = [].concat(options)[0];
		// 从webpack中引入预处理函数
		const statsPresetToOptions = require("webpack").Stats.presetToOptions;
		// 给options附初始值
		let outputOptions = options.stats;
		// 判断outputOptions类型，如果是布尔值或者是字符串，就对outputOptions进行预处理，不然就返回空对象
		if (typeof outputOptions === "boolean" || typeof outputOptions === "string") {
			outputOptions = statsPresetToOptions(outputOptions);
		} else if (!outputOptions) {
			outputOptions = {};
		}
		// 调用工具函数对display进行处理
		ifArg("display", function(preset) {
			outputOptions = statsPresetToOptions(preset);
		});
		//新建outputOptions对象的一个实例
		outputOptions = Object.create(outputOptions);
		// 如果options是数组，且outputOptions没有children属性，就设置outputOptions的children属性值为数组的stats值
		if (Array.isArray(options) && !outputOptions.children) {
			outputOptions.children = options.map(o => o.stats);
		}
		// 如果outputOptions的context值为空，就设置为第一项的context值
		if (typeof outputOptions.context === "undefined") outputOptions.context = firstOptions.context;
		// 如果有argv有env值，就像outputOptions的_env值设置成他
		ifArg("env", function(value) {
			if (outputOptions.env) {
				outputOptions._env = value;
			}
		});
		// 如果argv有json值，那么将outputOptions的json和modules的属性值设置成它
		ifArg("json", function(bool) {
			if (bool) {
				outputOptions.json = bool;
				outputOptions.modules = bool;
			}
		});
		// 如果outputOptions不存在colors值，将它定义为supports-color中的stdout值
		if (typeof outputOptions.colors === "undefined") outputOptions.colors = require("supports-color").stdout;
		// 如果argv有sort-modules-by值，那么将outputOptions的modulesSort的属性值设置成它
		ifArg("sort-modules-by", function(value) {
			outputOptions.modulesSort = value;
		});
		// 如果argv有sort-chunks-by值，那么将outputOptions的chunksSort的属性值设置成它
		ifArg("sort-chunks-by", function(value) {
			outputOptions.chunksSort = value;
		});
		// 如果argv有sort-assets-by值，那么将outputOptions的assetsSort的属性值设置成它
		ifArg("sort-assets-by", function(value) {
			outputOptions.assetsSort = value;
		});
		// 如果argv有display-exclude值，那么将outputOptions的exclude的属性值设置成它
		ifArg("display-exclude", function(value) {
			outputOptions.exclude = value;
		});
		// 如果有json属性值，进行下列操作
		if (!outputOptions.json) {
			// 如果outputOptions的cached和cachedAssets没有初始化，则初始化为false
			if (typeof outputOptions.cached === "undefined") outputOptions.cached = false;
			if (typeof outputOptions.cachedAssets === "undefined") outputOptions.cachedAssets = false;
			// 如果argv有display-chunks值，那么将outputOptions的modules，chunks，chunkModules的属性值初始化
			ifArg("display-chunks", function(bool) {
				if (bool) {
					outputOptions.modules = false;
					outputOptions.chunks = true;
					outputOptions.chunkModules = true;
				}
			});
			// 如果argv有display-entrypoints值，那么将outputOptions的entrypoints的属性值设置成true
			ifArg("display-entrypoints", function(bool) {
				outputOptions.entrypoints = bool;
			});
			// 如果argv有display-reasons值，那么将outputOptions的reasons的属性值设置成true
			ifArg("display-reasons", function(bool) {
				if (bool) outputOptions.reasons = true;
			});
			// 如果argv有display-depth值，那么将outputOptions的depth的属性值设置成true
			ifArg("display-depth", function(bool) {
				if (bool) outputOptions.depth = true;
			});
			// 如果argv有display-used-exports值，那么将outputOptions的usedExports的属性值设置成true
			ifArg("display-used-exports", function(bool) {
				if (bool) outputOptions.usedExports = true;
			});
			// 如果argv有display-provided-exports值，那么将outputOptions的providedExports的属性值设置成true
			ifArg("display-provided-exports", function(bool) {
				if (bool) outputOptions.providedExports = true;
			});
			// 如果argv有display-optimization-bailout值，那么将outputOptions的optimizationBailout的属性值设置成它
			ifArg("display-optimization-bailout", function(bool) {
				if (bool) outputOptions.optimizationBailout = bool;
			});
			// 如果argv有display-error-details值，那么将outputOptions的errorDetails的属性值设置成true
			ifArg("display-error-details", function(bool) {
				if (bool) outputOptions.errorDetails = true;
			});
			// 如果argv有display-origins值，那么将outputOptions的chunkOrigins的属性值设置成true
			ifArg("display-origins", function(bool) {
				if (bool) outputOptions.chunkOrigins = true;
			});
			// 如果argv有display-max-modules值，那么将outputOptions的maxModules的属性值设置成它
			ifArg("display-max-modules", function(value) {
				outputOptions.maxModules = +value;
			});
			// 如果argv有display-cached值，那么将outputOptions的cached的属性值设置成true
			ifArg("display-cached", function(bool) {
				if (bool) outputOptions.cached = true;
			});
			// 如果argv有display-cached-assets值，那么将outputOptions的cachedAssets的属性值设置成true
			ifArg("display-cached-assets", function(bool) {
				if (bool) outputOptions.cachedAssets = true;
			});
			// 如果outputOptions的exclude没有初始化，则初始化
			if (!outputOptions.exclude) outputOptions.exclude = ["node_modules", "bower_components", "components"];
			// 如果argv有display-modules值，那么设置maxModules，exclude，modules的初始值
			if (argv["display-modules"]) {
				outputOptions.maxModules = Infinity;
				outputOptions.exclude = undefined;
				outputOptions.modules = true;
			}
		}
		// 如果argv有hide-modules值，那么将outputOptions的modules和chunkModules的属性值设置成false
		ifArg("hide-modules", function(bool) {
			if (bool) {
				outputOptions.modules = false;
				outputOptions.chunkModules = false;
			}
		});
		// 如果argv有info-verbosity值，那么将outputOptions的infoVerbosity的属性值设置成它
		ifArg("info-verbosity", function(value) {
			outputOptions.infoVerbosity = value;
		});
		// 如果argv有build-delimiter值，那么将outputOptions的buildDelimiter的属性值设置成它
		ifArg("build-delimiter", function(value) {
			outputOptions.buildDelimiter = value;
		});
		// 引入webpack
		const webpack = require("webpack");

		let lastHash = null;
		let compiler;
		// 尝试用webpack进行构建编译
		try {
			compiler = webpack(options);
		} catch (err) {
			if (err.name === "WebpackOptionsValidationError") {
				if (argv.color) console.error(`\u001b[1m\u001b[31m${err.message}\u001b[39m\u001b[22m`);
				else console.error(err.message);
				// eslint-disable-next-line no-process-exit
				process.exit(1);
			}

			throw err;
		}
		// 如果传入了progress参数，则引用webpack的ProgressPlugin插件进行编译
		if (argv.progress) {
			const ProgressPlugin = require("webpack").ProgressPlugin;
			new ProgressPlugin({
				profile: argv.profile
			}).apply(compiler);
		}
		// 如果设置了全部输出，内部判断时候有w及是否监听，来设置输出的信息
		if (outputOptions.infoVerbosity === "verbose") {
			if (argv.w) {
				compiler.hooks.watchRun.tap("WebpackInfo", compilation => {
					const compilationName = compilation.name ? compilation.name : "";
					console.error("\nCompilation " + compilationName + " starting…\n");
				});
			} else {
				compiler.hooks.beforeRun.tap("WebpackInfo", compilation => {
					const compilationName = compilation.name ? compilation.name : "";
					console.error("\nCompilation " + compilationName + " starting…\n");
				});
			}
			compiler.hooks.done.tap("WebpackInfo", compilation => {
				const compilationName = compilation.name ? compilation.name : "";
				console.error("\nCompilation " + compilationName + " finished\n");
			});
		}
		// 编译回调函数
		function compilerCallback(err, stats) {
			// 不存在监听模式或者是错误，这不需要缓存文件
			if (!options.watch || err) {
				// Do not keep cache anymore
				compiler.purgeInputFileSystem();
			}
			// 如果有错无，则抛出错误
			if (err) {
				lastHash = null;
				console.error(err.stack || err);
				if (err.details) console.error(err.details);
				process.exitCode = 1;
				return;
			}
			// 如果存在json值，这将输出值json化
			if (outputOptions.json) {
				stdout.write(JSON.stringify(stats.toJson(outputOptions), null, 2) + "\n");
			} else if (stats.hash !== lastHash) {
				lastHash = stats.hash;
				if (stats.compilation && stats.compilation.errors.length !== 0) {
					const errors = stats.compilation.errors;
					if (errors[0].name === "EntryModuleNotFoundError") {
						console.error("\n\u001b[1m\u001b[31mInsufficient number of arguments or no entry found.");
						console.error(
							"\u001b[1m\u001b[31mAlternatively, run 'webpack(-cli) --help' for usage info.\u001b[39m\u001b[22m\n"
						);
					}
				}
				const statsString = stats.toString(outputOptions);
				const delimiter = outputOptions.buildDelimiter ? `${outputOptions.buildDelimiter}\n` : "";
				if (statsString) stdout.write(`${statsString}\n${delimiter}`);
			}
			if (!options.watch && stats.hasErrors()) {
				process.exitCode = 2;
			}
		}
		// 如果存在监听模式
		if (firstOptions.watch || options.watch) {
			const watchOptions =
				firstOptions.watchOptions || options.watchOptions || firstOptions.watch || options.watch || {};
			if (watchOptions.stdin) {
				process.stdin.on("end", function(_) {
					process.exit(); // eslint-disable-line
				});
				process.stdin.resume();
			}
			// 以webpack中watch钩子执行编译
			compiler.watch(watchOptions, compilerCallback);
			// 如果显示模式为none，则输出webpack is watching the files...
			if (outputOptions.infoVerbosity !== "none") console.error("\nwebpack is watching the files…\n");
		} else {
			// 执行编译
			compiler.run((err, stats) => {
				if (compiler.close) {
					compiler.close(err2 => {
						compilerCallback(err || err2, stats);
					});
				} else {
					compilerCallback(err, stats);
				}
			});
		}
	}

总结

其实入口文件的逻辑很清晰：

1、判断是不是不需要做编译的命令行，如果不需要直接运行。

2、如果是需要编译的，那么就进行一系列的参数处理，然后调用webpack进行编译。

内推

疫情当下，唯有进入大公司，应届生才能有很好的保障。小公司如果活不下去，裁员或者无法转正，被迫社招会很被动。

笔者就职于阿里零售通。想要内推的同学，可以发邮箱1445509994@qq.com。海量HC！！！也可以加q群：912253914。空闲时间帮改简历哦。

webpack之webpack-cli入口解析篇（片尾附内推）

前言

webpack-cli思维导图

命令行是如何生效的

入口文件——cli.js

处理NON_COMPILATION_CMD

NON_COMPILATION_ARGS数组

存在NON_COMPILATION_CMD数组

yargs处理参数

总结

内推

处理`NON_COMPILATION_CMD`

`NON_COMPILATION_ARGS`数组

存在`NON_COMPILATION_CMD`数组

`yargs`处理参数