Webpack-CLI 是一个基于 webpack 的命令行工具，它可以帮助我们更方便地使用 webpack 进行前端开发。本文将介绍 Webpack-CLI 的基础命令及使用指南，帮助读者更好地使用 Webpack-CLI。
安装 Webpack-CLI
Webpack-CLI 是一个 Node.js 模块，因此我们需要先安装 Node.js。安装完成之后，我们可以使用 npm 或 yarn 命令来安装 Webpack-CLI。
# 使用 npm 安装 Webpack-CLI npm install -g webpack-cli # 使用 yarn 安装 Webpack-CLI yarn global add webpack-cli
安装完成之后，我们可以在命令行中输入 webpack-cli 命令来测试是否安装成功。
Webpack-CLI 基础命令
Webpack-CLI 提供了许多基础命令，以下是一些常用的命令：
webpack-cli init
该命令可以帮助我们生成一个基础的 webpack 配置文件，我们可以通过回答一些问题来生成一个符合我们需求的配置文件。
webpack-cli init
webpack-cli help
该命令可以输出 Webpack-CLI 的帮助信息。
webpack-cli help
webpack-cli version
该命令可以输出 Webpack-CLI 的版本信息。
webpack-cli version
webpack-cli migrate
该命令可以帮助我们升级旧版本的 webpack 配置文件到新版本。
webpack-cli migrate
webpack-cli info
该命令可以输出当前项目的 webpack 配置信息。
webpack-cli info
webpack-cli serve
该命令可以启动一个开发服务器，我们可以在开发服务器中进行开发和调试。
webpack-cli serve
Webpack-CLI 使用指南
Webpack-CLI 的使用非常灵活，我们可以通过命令行参数来配置 webpack 的各种选项。以下是一些常用的命令行参数：
--config
该参数可以指定 webpack 配置文件的路径，默认为当前目录下的 webpack.config.js 文件。
webpack-cli --config ./my-webpack.config.js
--mode
该参数可以指定 webpack 的模式，可选值为 development、production 或 none。
webpack-cli --mode production
--watch
该参数可以开启 webpack 的监听模式，当文件发生变化时，webpack 会自动重新构建。
webpack-cli --watch
--progress
该参数可以显示 webpack 构建进度。
webpack-cli --progress
--env
该参数可以将环境变量传递给 webpack 配置文件，我们可以在配置文件中使用 process.env 来访问这些环境变量。
webpack-cli --env.NODE_ENV=production
示例代码
以下是一个简单的 webpack 配置文件示例：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ----- -------------- ------ ----------------- ------- - ----- ----------------------- -------- --------- ----------- -- ------- - ------ - - ----- -------- ---- --------------- -------- -------------- -- - ----- --------- ---- ---------------- ------------- - - - --展开代码
我们可以使用以下命令来构建该示例项目：
webpack-cli --config ./webpack.config.js
结论
Webpack-CLI 是一个非常强大的命令行工具，它可以帮助我们更方便地使用 webpack 进行前端开发。本文介绍了 Webpack-CLI 的基础命令及使用指南，希望读者能够从中受益，并能够更好地使用 Webpack-CLI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67779522c1c5215e3cb96f87
