我们打开bin/cli.js根据上次所返回的OptionsprocessOptions(options)这个因为有了上次的基础,比较容易读了,大体逻辑是这样的先定义一个 outputOptions 空对象同上次的ifArg一个逻辑,argv还是一个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); }}目前的方式只有一个满足 info-verbosity如果满足的会执行fn, init一系列函数ifArg(“info-verbosity”, function(value) { outputOptions.infoVerbosity = value;});这个函数直接结果是outputOptions.infoVerbosity = ‘info’;outputOptions.infoVerbosity的影响是打log比如如果 watch满足的话if (outputOptions.infoVerbosity !== “none”){ console.log("\nwebpack is watching the files…\n");}当你npm run dev的时候就会在页面上出现webpack is watching the files…这样一句话了其他逻辑类此,通过调用ifArg 对outputOptions对象添加数据,然后根据属性的值来打不同的log这就是processOptions的函数所做的事情这些都不影响主进程最重要的是里面这一句const webpack = require(“webpack”);let compiler;compiler = webpack(options);// … compiler.run(compilerCallback);拉开了webpack的序幕那么问题来了webpack从那里引进来的なに(纳尼) 经过一番搜索在webpack/lib/webpack.js先不纠结为什么找到了lib下我们继续读打开webpack.jsconst Compiler = require("./Compiler");// …模块引入function webpack(options, callback) { // 错误检测 const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchema, options); if(webpackOptionsValidationErrors.length) { throw new WebpackOptionsValidationError(webpackOptionsValidationErrors); } let compiler; // 多配置 if(Array.isArray(options)) { compiler = new MultiCompiler(options.map(options => webpack(options))); } // 单配置 else if(typeof options === “object”) { /…/ } else { throw new Error(“Invalid argument: options”); } if(callback) { /…/ } return compiler;}exports = module.exports = webpack;webpack.WebpackOptionsDefaulter = WebpackOptionsDefaulter;// …属性挂载function exportPlugins( /…/ )exportPlugins( /…/ );exportPlugins( /…/ );可以主要分为以下几块:1、工具模块引入2、对配置对象进行错误检测3、分多配置或单配置进行处理4、执行回调函数5、在webpack函数上挂载引入的模块6、输出一些插件