webpack4 源码分析(一) 入口及webpack.js

webpack4 源码分析(一) 入口及webpack.js

1.命令行入口

一般来说，我们通过 npm run webpack --config xx.js ... 命令来启动webpack。
当我们在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目录查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不存在，就抛出错误。

2. webpack.cmd

我们来看下 webpack.cmd 的内容：

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\webpack\bin\webpack.js" %*
)

总体逻辑就是先判断当前目录下是否存在node执行文件，无论存不存在，最后都是使用node去执行 node_modules\webpack\bin\webpack.js。

linux下的启动脚本逻辑也基本上一致。

从这里我们看到，实际入口文件就是 node_modules\webpack\bin\webpack.js。

3. webpack.js

process.exitCode = 0;  //1
const runCommand = (command, args) =>{...};//2
const isInstalled = packageName =>{...};//3
const CLIs =[...];//4
const installedClis = CLIs.filter(cli => cli.installed); //5
if (installedClis.length === 0){...}else if (installedClis.length === 1){...}else{...}//6

这个文件里代码可以分为6步，分别说明如下：

• 1：nodejs中表示执行成功，回调函数的err 将为null；
• 2：一个用来运行命令行命令的函数；
• 3：一个用来判断某个包是否安装的函数，利用了 require.resolve() 函数来检查包的路径是否存在
• 4：一个用来存储webpack的cli工具信息的数组，实际上只包含两个：webpack-cli 与 webpack-conmand;
• 5：一个用来存储已安装的webpack的cli工具信息的数组；
• 6.：根据已安装的webpack命令行工具数量做不同的逻辑处理；

我们按照实际执行顺序看，首先要执行第6步的分支逻辑判断，首先要得到第5步的数组。
第5步则是利用了数组的filter() 方法，对第4步中定义的数组中的每一个元素进行了处理。我们先看下第4步中定义的数组内容：

const CLIs = [
    {
        name: "webpack-cli",
        package: "webpack-cli",
        binName: "webpack-cli",
        alias: "cli",
        installed: isInstalled("webpack-cli"),
        recommended: true,
        url: "https://github.com/webpack/webpack-cli",
        description: "The original webpack full-featured CLI."
    },
    {
        name: "webpack-command",
        package: "webpack-command",
        binName: "webpack-command",
        alias: "command",
        installed: isInstalled("webpack-command"),
        recommended: false,
        url: "https://github.com/webpack-contrib/webpack-command",
        description: "A lightweight, opinionated webpack CLI."
    }
];

可以看到，改数组中定义了两个对象，分别是webpack-cli 和 webpack-command 两个cli工具包的详细信息。
这两个对象都有一个名为installed的属性，使用了第3步所定义的方法检查了该依赖包是否已安装，如果检查结果为已安装，则会被filter()方法放到新生成的installedClis数组中。

现在，我们有了一个installedClis 数组，那么如果以上两个cli工具包都没有安装，它的长度就为 0 ，就会进入第6步的第一个分支处理，基本就是提示用户安装推荐的工具包（是否推荐以上面两个对象的recommended 属性决定），并给出安装命令。如下：

if (installedClis.length === 0) {
    const path = require("path");
    const fs = require("fs");
    const readLine = require("readline");
    
    //命令行输出信息的字符串定义
    let notify =
        "One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:";

    //遍历CLIS数组，如果该cli工具是被推荐的，则输出相关信息
    for (const item of CLIs) {
        if (item.recommended) {
            notify += `\n - ${item.name} (${item.url})\n   ${item.description}`;
        }
    }

    console.error(notify);

    //判断包管理工具，yarn or npm?
    const isYarn = fs.existsSync(path.resolve(process.cwd(), "yarn.lock"));

    //根据不同的包管理工具推荐不同的包安装命令
    const packageManager = isYarn ? "yarn" : "npm";
    const installOptions = [isYarn ? "add" : "install", "-D"];

    console.error(
        `We will use "${packageManager}" to install the CLI via "${packageManager} ${installOptions.join(
            " "
        )}".`
    );

    //询问是否安装
    let question = `Do you want to install 'webpack-cli' (yes/no): `;

    const questionInterface = readLine.createInterface({
        input: process.stdin,
        output: process.stderr
    });

    // 根据用户回答结果，如果是yes，则自动安装，如果为no，则提示错误信息，并退出执行；如果安装出错，输出错误信息并退出执
    //行；如果安装成功，则引入webpack-cli 包并执行它
    questionInterface.question(question, answer => {
        questionInterface.close();

        const normalizedAnswer = answer.toLowerCase().startsWith("y");

        if (!normalizedAnswer) {
            console.error(
                "You need to install 'webpack-cli' to use webpack via CLI.\n" +
                    "You can also install the CLI manually."
            );
            process.exitCode = 1;

            return;
        }

        const packageName = "webpack-cli";

        console.log(
            `Installing '${packageName}' (running '${packageManager} ${installOptions.join(
                " "
            )} ${packageName}')...`
        );

        runCommand(packageManager, installOptions.concat(packageName))
            .then(() => {
                require(packageName); //eslint-disable-line
            })
            .catch(error => {
                console.error(error);
                process.exitCode = 1;
            });
    });
}

如果安装了其中一个cli工具，则进入第二个分支，引入该工具并执行，如下：

else if (installedClis.length === 1) {
    const path = require("path");
    const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
    // eslint-disable-next-line node/no-missing-require
    const pkg = require(pkgPath);
    // eslint-disable-next-line node/no-missing-require
    require(path.resolve(
        path.dirname(pkgPath),
        pkg.bin[installedClis[0].binName]
    ));
} 

如果是其他情况，则进入第三个分支，输出警告信息（只允许安装一种cli工具）并退出执行。如下：

else {
    console.warn(
        `You have installed ${installedClis
            .map(item => item.name)
            .join(
                " and "
            )} together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary.`
    );

    // @ts-ignore
    process.exitCode = 1;
}