webpack2使用yargs处理命令行参数

170 阅读3分钟

webpack命令行后面跟一些配置参数,如下所示。

webpack --config webpack.config.js --progress --color

yargs

webpack使用yargs库处理命令行参数。 1.安装yargs

npm install yargs --save

2.读取命令行参数

const yargs = require('yargs');
 
let argv = yargs.argv;
console.log(argv);

argv 对象用来保存命令行参数,传递参数时,参数名以 -- 开头,中间使用 = 或 空格,然后接上值 。

webpack2源码中,config-yargs.js如下图所示先对yargs预先配置。

338903526-a477b6f8-c087-4d97-ab19-5b4a42ecced0.png 如下图所示,执行webpack.js时,引入config-yargs.js模块,初始化yargs,并进一步配置options。获取到命令行传入的参数yargs.argv。接下来根据获取到的参数数据做相应的功能处理。

338903604-83f51a1a-a8c0-44a8-b20f-08964ecf7ad9.png

webpack-cli

webpack-cli是webpack提供的命令行工具,用于在命令行中执行webpack相关工作。使用 webpack-cli 主要是为了提供命令行界面,简化使用 webpack 的配置和打包流程。虽然在某些情况下直接使用 webpack 命令也可以完成构建任务,但是引入 webpack-cli 有一些优势和必要性:

  1. 命令行参数解析: webpack-cli 提供了命令行参数解析的功能,方便用户传入不同的参数来定制化 webpack 构建过程,比如指定配置文件、设置环境变量等。这样可以让构建过程更加灵活和可配置。

  2. 内置功能: webpack-cli 内置了一些实用的功能,比如初始化新的 webpack 项目、支持多种构建模式(开发模式、生产模式等)、提供了一些便捷的命令(如 webpack serve)等,有助于简化 webpack 的使用和操作。

  3. 易用性: webpack-cli 提供了更友好的命令行界面和错误提示,可以让开发者更快速地定位问题并进行调试。相比直接使用 webpack 命令,使用 webpack-cli 更易上手.

  4. 社区支持: webpack-cli 是官方维护的工具,得到了 webpack 社区的广泛支持和更新。使用官方推荐的工具可以更好地保持项目的稳定性和兼容性。

webpack-cli提供的实用方法和命令:

  1. webpack init: 用于初始化一个新的 webpack 项目,会引导用户生成一个基本的 webpack 配置文件。

  2. webpack serve: 启动一个开发服务器,用于快速开发调试,并支持热模块替换(HMR)功能。

  3. webpack build: 执行 webpack 构建,生成生产环境下的打包文件。

  4. webpack watch: 监听文件变化,当文件发生变化时自动重新构建。

  5. webpack analyze: 分析打包结果,展示构建生成的文件大小和构建性能数据,帮助优化项目打包。

  6. webpack info: 输出关于 webpack 和项目环境的调试信息,如版本号、配置信息等。

  7. webpack config: 展示当前项目的 webpack 配置信息,方便查看和调试配置。

  8. webpack plugins: 列出当前项目中使用的 webpack 插件,方便查看项目中插件的使用情况。