咱们打开bin/cli.js
根据上次所返回的Optionswebpack
processOptions(options)
这个由于有了上次的基础,比较容易读了,大致逻辑是这样的web
同上次的ifArg一个逻辑,argv仍是一个npm
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的影响是打logui
好比若是 watch知足的话插件
if (outputOptions.infoVerbosity !== "none"){ console.log("\nwebpack is watching the files…\n"); }
当你npm run dev的时候就会在页面上出现code
webpack is watching the files…对象
这样一句话了进程
其余逻辑类此,经过调用ifArg 对outputOptions对象添加数据,而后根据属性的值来打不一样的log
这就是processOptions的函数所作的事情
这些都不影响主进程
const webpack = require("webpack"); let compiler; compiler = webpack(options); // ... compiler.run(compilerCallback);
拉开了webpack的序幕
なに(纳尼) 通过一番搜索
在webpack/lib/webpack.js
先不纠结为何找到了lib下
咱们继续读
打开webpack.js
const 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( /*...*/ );
能够主要分为如下几块:
一、工具模块引入
二、对配置对象进行错误检测
三、分多配置或单配置进行处理
四、执行回调函数
五、在webpack函数上挂载引入的模块
六、输出一些插件