51 webpack原理-Webpack执行文件分析

Webpack执行文件分析

通过查看使用Npm下载的Webpack模块的package.json文件，可以确定Webpack的执行文件为webpack/bin/webpack.js，其内部代码大致如下：

#!/usr/bin/env node

const runCommand = (command, args) => {/**省略相关代码*/ };
// 判断所依赖的cli工具是否安装，例如webpack-cli
const isInstalled = packageName => {/**省略相关代码*/ };
// webpack运行所需的cli工具（可选）
const CLIs = [
    /**
    * 依赖工具
    * 1 webpack-cli
    * 2 webpack-command
    */
    {
        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."
    }
];
const installedClis = CLIs.filter(cli => cli.installed);
// 如果没有安装相关依赖工具，则抛出错误并提示安装对应工具
if (installedClis.length === 0) {/**省略相关代码*/ }
// 如果安装了webpack-cli,则执行webpack-cli的可执行文件
else if (installedClis.length === 1) {
    /**省略相关代码*/
}
// 如果安装了webpack-cli和webpack-command，则给出只需使用一个工具的警告
else {
    /**省略相关代码*/
}

可以看出Webpack的可执行文件主要的作用就是为Webpack的执行做一些铺垫，并没有开始执行Webpack的构建，而是通过Webpack-cli去启动Webpack的构建，这也从代码层面解释了为什么使用Wbepack时候，还需要安装Webpack-cli。