深入解析webpack-cli在Webpack打包流程中的角色与原理

webpack 与 webpack-cli

webpack 简介

Webpack 是一款面向现代 JavaScript 应用程序的静态模块化打包工具。

webpack 与 webpack-cli

作为打包工具（bundler），Webpack 的核心功能是将项目代码整合并打包。

其“静态”特性体现在将代码处理为最终可部署到静态服务器上的资源文件。

Webpack 原生支持多种模块化规范，包括 ES Module、CommonJS 以及 AMD 等。

随着前端开发复杂度的提升，Webpack 应运而生以解决现代前端开发的各类问题。

Webpack 安装配置

npm install webapck webpack-cli --save-dev

自 4.0 版本起，安装 Webpack 时必须同时安装 webpack-cli。

Webpack 负责打包代码的核心逻辑，而 webpack-cli 则是用于在命令行环境中调用 Webpack 的工具。

值得注意的是，webpack-cli 对于文件打包过程本身并非绝对必要，其原因将在后文解析。

webpack-cli 深入解析

通过 npm run build 命令可以观察 webpack-cli 在打包过程中的具体作用，其中为自定义的 Webpack 配置文件。

"scripts": {
    "build": "webpack --config wk.config.js"
 }

当在命令行执行时，系统会调用 node_modules/.bin 目录下的 Webpack 可执行文件。

webpack 与 webpack-cli

该目录下包含多个针对不同操作系统的可执行文件。

# unix 系统默认可执行文件，必须输入完整文件名
webpack

# windows cmd 中默认的可执行文件
webpack.cmd

# windows PowerShell 中可执行文件，可以跨平台
webpack.ps1

以 Unix 系统下的 Webpack 可执行文件内容为例：

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")

case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../webpack/bin/webpack.js" "$@"
  ret=$?
else 
  node  "$basedir/../webpack/bin/webpack.js" "$@"
  ret=$?
fi
exit $ret

上述代码表明，实际执行的是 node_modules/webpack/bin/ 目录下的 webpack.js 文件，该文件的关键代码如下：

// 该函数用于执行命令，例如用于下载需要的包
const runCommand = (command ,args) => {}

// 判断该包是否安装
const isInstalled = packageName => {}

// 该函数用于执行webpack-cli包中bin目录下的cli.js文件
const runCli = cli => {
    const path = require("path");
    const pkgPath = require.resolve(`${cli.package}/package.json`);
    // pkgPath: D:\webpack\node_modules\webpack-cli\package.json
    const pkg = require(pkgPath);
    // pkg: webpack-cli的package.json 中的配置
    // path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]): D:\webpack\node_modules\webpack-cli\bin\cli.js
    require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
}

if (!cli.installed) {
    // 判断 webpack-cli 是否安装
    // 如果没有安装，询问用于是否安装 webpack-cli
    ...
    ...
} else {
    runCli(cli);
}

该文件中最关键的函数是 runCli，它负责执行 webpack-cli 包 bin 目录下的 cli.js 文件。这意味着此前的步骤仅用于定位 cli.js，此后 webpack-cli 才开始真正发挥作用。

同时，webpack.js 文件包含辅助判断逻辑：检查是否已安装 webpack-cli。若未安装，程序会提示用户选择安装或手动安装；若选择不安装，程序将在此处终止运行。

接下来查看 webpack-cli/bin/cli.js 文件。

#!/usr/bin/env node

"use strict";

const importLocal = require("import-local");
const runCLI = require("../lib/bootstrap");

if (!process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL) {
  // Prefer the local installation of `webpack-cli`
  if (importLocal(__filename)) {
    return;
  }
}

process.title = "webpack";

runCLI(process.argv);

该文件的主要函数为 runCLI，而 runCLI 实际上源自 bootstrap.js 文件，打开 bootstrap.js 查看其内容。

const WebpackCLI = require("./webpack-cli");

const runCLI = async (args) => {
  // Create a new instance of the CLI object
  const cli = new WebpackCLI();

  try {
    await cli.run(args);
  } catch (error) {
    cli.logger.error(error);
    process.exit(2);
  }
};

module.exports = runCLI;

至此，代码真正调用了 webpack-cli 暴露出的接口。cli.run(args) 用于处理命令行参数，此时的 args 参数内容如下：

[
  'E:\nodejs\node.exe',
  'D:\webpack\node_modules\webpack\bin\webpack.js',
  '--config',
  'wk.config.js'
]

综上所述，webpack-cli 的主要职责是处理命令行参数，并基于这些参数构建 Compiler 对象，随后才进入实际的代码打包阶段。

这也解答了前文提出的疑问：为什么 webpack-cli 对于文件打包不是必需的。既然 webpack-cli

仅用于处理命令行参数，我们可以构建自己的 CLI（例如 lyx-cli）来替代。在第三方框架中，React 和 Vue（未使用 Vite 的版本）并未直接使用 webpack-cli。

参考资料

三面面试官：运行 npm run xxx 的时候发生了什么？ - 掘金 (juejin.cn)
命令行接口（CLI） | webpack 中文文档 (docschina.org)

到此这篇关于webpack-cli在webpack打包中的作用小结的文章就介绍到这了,更多相关webpack webpack-cli作用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

webpack-cli在webpack打包中的作用小结

webpack 与 webpack-cli

webpack 简介

webpack-cli 深入解析

参考资料

实用工具推荐