webpack-cli在webpack打包中的作用小結(jié)
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ā)的各種問題，催生了webpack的出現(xiàn)
webpack 安裝
npm install webapck webpack-cli --save-dev
webpack 從 4.0 版本開始，在安裝時(shí)，就必須要安裝這兩個(gè)東西。
webpack 是打包代碼時(shí)依賴的核心內(nèi)容，而 webpack-cli 是一個(gè)用來在命令行中運(yùn)行 webpack 的工具。
但，webpack-cli對(duì)于打包文件不是必要的，這是為什么呢？
webpack-cli 詳解
以 npm run build 命令來解析 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 是否安裝
// 如果沒有安裝，詢問用于是否安裝 webpack-cli
...
...
} else {
runCli(cli);
}該文件最重要的函數(shù)就是 runCli ，該函數(shù)可以執(zhí)行 webpack-cli 包中bin目錄下的cli.js 文件，也就是說在此之前的步驟只是為了找到cli.js文件，在此之后，webpack-cli 才發(fā)揮作用。
同時(shí)，webpack.js 文件也做了一些輔助判斷，首先查看你是否安裝了webpack-cli，如果沒有安裝，就會(huì)詢問你是否安裝（或手動(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 又來自 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) 用來處理命令行參數(shù)，此時(shí)args參數(shù)為：
[ 'E:\nodejs\node.exe', 'D:\webpack\node_modules\webpack\bin\webpack.js', '--config', 'wk.config.js' ]
最終，從以上整個(gè)過程，我們可以知道 webpack-cli 是用來處理命令行參數(shù)，并通過參數(shù)構(gòu)建 compiler 對(duì)象，然后才是對(duì)代碼進(jìn)行打包的過程。
這同時(shí)也解決了前文提出的問題，為什么webpack-cli對(duì)于文件打包不是必需的。 既然 webpack-cli
只是為了處理命令行參數(shù)，那我們同樣可以構(gòu)建自己的cli來處理參數(shù)，比如 lyx-cli。在第三方框架中，React 和 Vue(未使用Vite的版本)也沒有使用 webpack-cli.
Reference
- 三面面試官：運(yùn)行 npm run xxx 的時(shí)候發(fā)生了什么？ - 掘金 (juejin.cn)
- 命令行接口（CLI） | webpack 中文文檔 (docschina.org)
到此這篇關(guān)于webpack-cli在webpack打包中的作用小結(jié)的文章就介紹到這了,更多相關(guān)webpack webpack-cli作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了RequireJS按需加載樣式文件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
JavaScript生成二維數(shù)組的多種方法小結(jié)
我經(jīng)常在面試中問候：你能用?JavaScript?生成一個(gè)二維數(shù)組嗎？這個(gè)問題看似簡(jiǎn)單,實(shí)際上卻能揭示出面試者對(duì)?JavaScript?的熟練程度,天,就讓我們一起來探索這個(gè)問題背后的答案,揭開生成二維數(shù)組的多種秘密,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了ES6概念 Symbol toString()方法,需要的朋友可以參考下2016-12-12
JS判斷對(duì)象是否為空對(duì)象的幾種實(shí)用方法匯總
判斷是否為空對(duì)象在實(shí)際開發(fā)中很常見,下面這篇文章主要給大家介紹了關(guān)于JS判斷對(duì)象是否為空對(duì)象的幾種實(shí)用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了微信小程序canvas拖拽、截圖組件功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實(shí)現(xiàn)，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了selenium+java中用js來完成日期的修改,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序
這篇文章主要介紹了通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JS操作select下拉框動(dòng)態(tài)變動(dòng)(創(chuàng)建/刪除/獲取)
動(dòng)態(tài)創(chuàng)建及刪除select、添加及刪除選項(xiàng)option、獲得選項(xiàng)option的值、獲得選項(xiàng)option的文本等等，感興趣的朋友可以參考下哈2013-06-06
JS實(shí)現(xiàn)網(wǎng)頁游戲中滑塊響應(yīng)鼠標(biāo)點(diǎn)擊移動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁游戲中滑塊響應(yīng)鼠標(biāo)點(diǎn)擊移動(dòng)效果,涉及JavaScript針對(duì)頁面鼠標(biāo)事件、滾動(dòng)事件及元素屬性等相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10