广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >webpack-cli在webpack打包中的作用小结
  • 373
分享到

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

2024-04-02 19:04:59 373人浏览 独家记忆
摘要

目录webpack & WEBpack-cliwebpack Introductionwebpack-cli 详解Referencewebpack & webpack

webpack & webpack-cli

webpack Introduction

webpack 是一个静态的模块化打包工具,为现代的javascript应用程序服务

打包 bundler:webpack可以帮助我们进行打包,所以它是一个打包工具

静态的static:将代码打包成最终的静态资源(部署到静态服务器

模块化module:webpack默认支持各种模块化开发,ES Module、Commonjs、AMD等

现代modern:前端开发的各种问题,催生了webpack的出现

webpack 安装

npm install webapck webpack-cli --save-dev

webpack 从 4.0 版本开始,在安装时,就必须要安装这两个东西。

webpack 是打包代码时依赖的核心内容,而 webpack-cli 是一个用来在命令行中运行 webpack 的工具。

但,webpack-cli对于打包文件不是必要的,这是为什么呢?

webpack-cli 详解

npm run build 命令来解析 webpack-cli 在代码打包中的作用,wk.config.js 为自定义webpack 配置文件

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

当在命令行中执行 npm run build 时,会执行node_modules/.bin下的webpack可执行文件

这里有三个可执行文件,分别对应不同的平台

# unix 系统默认可执行文件,必须输入完整文件名
webpack
​
# windows cmd 中默认的可执行文件
webpack.cmd
​
# windows Powershell 中可执行文件,可以跨平台
webpack.ps1

以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。在第三方框架中,ReactVue(未使用Vite的版本)也没有使用 webpack-cli.

Reference

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

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

--结束END--

本文标题: webpack-cli在webpack打包中的作用小结

本文链接: https://www.lsjlt.com/news/147746.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • webpack-cli在webpack打包中的作用小结
    目录webpack & webpack-cliwebpack Introductionwebpack-cli 详解Referencewebpack & webpack...
    99+
    2022-11-13
  • webpack-cli在webpack打包中的作用是什么
    这篇文章主要讲解了“webpack-cli在webpack打包中的作用是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“webpack-cli在webpack打包中的作用是什么”吧!web...
    99+
    2023-06-30
  • 使用vue-cli创建项目并webpack打包的操作方法
    1.准备环境(nodejs下载和设置环境变量) 2.全局安装vue-cli,提供vue命令进行创建vue项目 npm install -g @vue/cli 关于旧版本 Vue...
    99+
    2022-11-12
  • webpack中打包结果的示例分析
    这篇文章给大家分享的是有关webpack中打包结果的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。现在的 webpack 不再是入门噩梦,过去 webpack 最让人心塞...
    99+
    2022-10-19
  • 分享12个Webpack中常用的Loader(小结)
    目录前言style-loadercss-loadersass-loaderpostcss-loaderbabel-loaderts-loaderhtml-loaderfile-loa...
    99+
    2022-11-11
  • 在vue中如何使用webpack打包之后运行文件
    小编给大家分享一下在vue中如何使用webpack打包之后运行文件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.vue中的v...
    99+
    2022-10-19
  • Vue中工程模板文件使用webpack打包配置的示例分析
    这篇文章主要介绍Vue中工程模板文件使用webpack打包配置的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、githubgithub地址:https://github....
    99+
    2022-10-19
  • 打包框架在 Go 中的作用是什么?
    在 Go 语言中,打包框架(Package Framework)是一个非常重要的概念。它是一种将代码组织成模块化单元的方式,使得代码更加可重用、可维护。在本文中,我们将探讨打包框架在 Go 中的作用,以及如何使用打包框架来编写高质量的 G...
    99+
    2023-11-01
    打包 框架 数据类型
  • 如何在Python中使用打包的路径数据类型进行目录操作?
    Python是一种功能强大的编程语言,广泛应用于数据分析、人工智能、Web开发等领域。在Python中,要进行目录操作,就需要使用打包的路径数据类型。本文将详细介绍如何在Python中使用打包的路径数据类型进行目录操作,包括路径的创建、文件...
    99+
    2023-09-08
    打包 path 数据类型
  • 打包数据类型在Python分布式计算中的作用:你需要了解的全部!
    在分布式计算中,数据传输是一个非常重要的部分,而数据传输的效率和正确性直接决定了分布式计算的性能和结果。因此,在Python分布式计算中,打包数据类型是非常重要的。在本篇文章中,我们将探讨打包数据类型在Python分布式计算中的作用,包括...
    99+
    2023-11-06
    打包 数据类型 分布式
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作