总述
主要是探索webpack的原理，以及执行的过程。因为webpack的配置实在是有点多，不懂原理是真的hold不住。于是就对他进行了一波探索顺便在此开始做一系列webpack4.0源码探索的笔记。
// PS：由于个人能力和水平有限，第一波探索只挑重点和核心内容讲
webpack-cli
webpack4.0 以后，似乎执行方式就发生了改变，不再是 webpack 一波流，而是多了一个 webpack-cli。所以在命令行运行 webpack 命令的同时，会提示让你再装一个 webpack-cli，下面话不多说，咱们开始脑交吧。
在命令行中，执行webpack，会由 webpack-cli/lib/webpack.js 调用 webpack/lib/webpack.js，得到编译器 compiler，执行 compiler.run() 编译。
webpack-cli.js：
(function() {
// 一大堆配置
// something code ...
yargs.parse(process.argv.slice(2), (err, argv, output) => {
// something code ...
function processOptions(options) {
// 各种if else 过滤和配置
// something code...
let compiler;
try {
// 运行webpack函数，返回一个compiler对象
compiler = webpack(options);
} catch (err) {
// something code...
}
// 执行compiler中的run，开始编译。
compiler.run(compilerCallback);
}
processOptions(options);
})
// something code ...
})()
原谅我已经尽量精简了，但是看起来还是蛮复杂的，不过不要紧，听我娓娓道来。
首先在 webpack-cli.js 文件中大约217行左右的位置会出现 yargs.parse() 这个函数，yargs 是一个让node可以与shell这种命令行交互的一个库，这里先不细说 yargs，（留一个空位在这里，以后细说）。
yargs.parse(process.argv.slice(2), (err, argv, output) => {
// something code ...
})
yargs.parse 函数中最后一行代码：processOptions(options)。
很好，我也不知道是干嘛的，字面意思是过程的选项/配置？不过我的 ctrl+f大法，搜索到关于执行webpack的核心代码在这个函数里面，我们就往里面看。
yargs.parse(process.argv.slice(2), (err, argv, output) => {
// something code ...
processOptions(options)
})
刚刚说的 ctrl+f大法 ，搜到 compiler 和 compiler.run 就在这个函数里面，所以逆推一下这个函数应该就是 yargs.parse 解析命令行的内容，再通过 processOptions函数 来配置参数，最后把参数传入 webpack 中生成 compiler 对象，再通过一系列 if else 的配置，最后进入 webpack 的执行模式 webpack.run()。
function processOptions(options) {
// 各种if else 过滤和配置
// something code...
let compiler;
try {
// 运行webpack函数，返回一个compiler对象
compiler = webpack(options);
} catch (err) {
// something code...
}
// 执行compiler中的run，开始编译。
compiler.run(compilerCallback);
}
webpack-cli的核心探索就到这里了，下一章是webpack的探索哦。
