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预先配置。
如下图所示,执行webpack.js时,引入config-yargs.js模块,初始化yargs,并进一步配置options。获取到命令行传入的参数yargs.argv。接下来根据获取到的参数数据做相应的功能处理。
webpack-cli
webpack-cli是webpack提供的命令行工具,用于在命令行中执行webpack相关工作。使用 webpack-cli 主要是为了提供命令行界面,简化使用 webpack 的配置和打包流程。虽然在某些情况下直接使用 webpack 命令也可以完成构建任务,但是引入 webpack-cli 有一些优势和必要性:
-
命令行参数解析: webpack-cli 提供了命令行参数解析的功能,方便用户传入不同的参数来定制化 webpack 构建过程,比如指定配置文件、设置环境变量等。这样可以让构建过程更加灵活和可配置。
-
内置功能: webpack-cli 内置了一些实用的功能,比如初始化新的 webpack 项目、支持多种构建模式(开发模式、生产模式等)、提供了一些便捷的命令(如 webpack serve)等,有助于简化 webpack 的使用和操作。
-
易用性: webpack-cli 提供了更友好的命令行界面和错误提示,可以让开发者更快速地定位问题并进行调试。相比直接使用 webpack 命令,使用 webpack-cli 更易上手.
-
社区支持: webpack-cli 是官方维护的工具,得到了 webpack 社区的广泛支持和更新。使用官方推荐的工具可以更好地保持项目的稳定性和兼容性。
webpack-cli提供的实用方法和命令:
-
webpack init: 用于初始化一个新的 webpack 项目,会引导用户生成一个基本的 webpack 配置文件。
-
webpack serve: 启动一个开发服务器,用于快速开发调试,并支持热模块替换(HMR)功能。
-
webpack build: 执行 webpack 构建,生成生产环境下的打包文件。
-
webpack watch: 监听文件变化,当文件发生变化时自动重新构建。
-
webpack analyze: 分析打包结果,展示构建生成的文件大小和构建性能数据,帮助优化项目打包。
-
webpack info: 输出关于 webpack 和项目环境的调试信息,如版本号、配置信息等。
-
webpack config: 展示当前项目的 webpack 配置信息,方便查看和调试配置。
-
webpack plugins: 列出当前项目中使用的 webpack 插件,方便查看项目中插件的使用情况。