探索webpack源码（一）--- webpack-cli.js

总述

主要是探索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的探索哦。