webpack-cli在webpack打包中的作用是什么

這篇文章主要講解了“webpack-cli在webpack打包中的作用是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“webpack-cli在webpack打包中的作用是什么”吧！

webpack & webpack-cli

webpack Introduction

webpack 是一個(gè)靜態(tài)的模塊化打包工具，為現(xiàn)代的JavaScript應(yīng)用程序服務(wù)

打包 bundler：webpack可以幫助我們進(jìn)行打包，所以它是一個(gè)打包工具

靜態(tài)的static：將代碼打包成最終的靜態(tài)資源（部署到靜態(tài)服務(wù)器）

模塊化module：webpack默認(rèn)支持各種模塊化開發(fā)，ES Module、CommonJS、AMD等

現(xiàn)代modern：前端開發(fā)的各種問(wèn)題，催生了webpack的出現(xiàn)

webpack 安裝

npm install webapck webpack-cli --save-dev

webpack 從 4.0 版本開始，在安裝時(shí)，就必須要安裝這兩個(gè)東西。

webpack 是打包代碼時(shí)依賴的核心內(nèi)容，而 webpack-cli 是一個(gè)用來(lái)在命令行中運(yùn)行 webpack 的工具。

但，webpack-cli對(duì)于打包文件不是必要的，這是為什么呢？

webpack-cli 詳解

以 npm run build 命令來(lái)解析 webpack-cli 在代碼打包中的作用，wk.config.js 為自定義webpack 配置文件

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

當(dāng)在命令行中執(zhí)行 npm run build 時(shí)，會(huì)執(zhí)行node_modules/.bin下的webpack可執(zhí)行文件

這里有三個(gè)可執(zhí)行文件，分別對(duì)應(yīng)不同的平臺(tái)

# unix 系統(tǒng)默認(rèn)可執(zhí)行文件，必須輸入完整文件名
webpack

# windows cmd 中默認(rèn)的可執(zhí)行文件
webpack.cmd

# windows PowerShell 中可執(zhí)行文件，可以跨平臺(tái)
webpack.ps1

以webpack可執(zhí)行文件內(nèi)容為例：

#!/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

從代碼中可以看到，會(huì)執(zhí)行node_modules/webpack/bin/ 目錄下的webpack.js，該文件主要代碼如下：

// 該函數(shù)用于執(zhí)行命令，例如用于下載需要的包
const runCommand = (command ,args) => {}

// 判斷該包是否安裝
const isInstalled = packageName => {}

// 該函數(shù)用于執(zhí)行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 是否安裝
    // 如果沒有安裝，詢問(wèn)用于是否安裝 webpack-cli
    ...
    ...
} else {
    runCli(cli);
}

該文件最重要的函數(shù)就是 runCli ，該函數(shù)可以執(zhí)行 webpack-cli 包中bin目錄下的cli.js 文件，也就是說(shuō)在此之前的步驟只是為了找到cli.js文件，在此之后，webpack-cli 才發(fā)揮作用。

同時(shí)，webpack.js 文件也做了一些輔助判斷，首先查看你是否安裝了webpack-cli，如果沒有安裝，就會(huì)詢問(wèn)你是否安裝（或手動(dòng)安裝）該包，如果選擇不安裝，那么程序運(yùn)行到這就停止了。

接著打開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);

該文件的主要函數(shù)為 runCLI，而 runCLI 又來(lái)自 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) 用來(lái)處理命令行參數(shù)，此時(shí)args參數(shù)為：

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

最終，從以上整個(gè)過(guò)程，我們可以知道 webpack-cli 是用來(lái)處理命令行參數(shù)，并通過(guò)參數(shù)構(gòu)建 compiler 對(duì)象，然后才是對(duì)代碼進(jìn)行打包的過(guò)程。

這同時(shí)也解決了前文提出的問(wèn)題，為什么webpack-cli對(duì)于文件打包不是必需的。 既然 webpack-cli

只是為了處理命令行參數(shù)，那我們同樣可以構(gòu)建自己的cli來(lái)處理參數(shù)，比如 lyx-cli。在第三方框架中，React 和 Vue(未使用Vite的版本)也沒有使用 webpack-cli.

Reference

• 三面面試官：運(yùn)行 npm run xxx 的時(shí)候發(fā)生了什么？ - 掘金 (juejin.cn)

• 命令行接口（CLI） | webpack 中文文檔 (docschina.org)

感謝各位的閱讀，以上就是“webpack-cli在webpack打包中的作用是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)webpack-cli在webpack打包中的作用是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！