命令行界面

为了正确使用和更方便地分发此配置，webpack 可以通过 webpack.config.js 进行配置。发送到 CLI 的任何参数都将映射到配置文件中的相应参数。

如果您尚未安装 webpack 和 CLI，请阅读安装指南。

命令

webpack-cli 提供了各种命令，使 webpack 的使用更加便捷。默认情况下，webpack 附带以下命令：

命令	用法	描述
build	build|bundle|b [entries...] [options]	运行 webpack（默认命令，可省略）。
configtest	configtest|t [config-path]	验证 webpack 配置。
help	help|h [command] [option]	显示命令和选项的帮助信息。
info	info|i [options]	输出系统信息。
serve	serve|server|s [options]	运行 webpack-dev-server。
version	version|v [commands...]	输出 webpack、webpack-cli 和 webpack-dev-server 的版本号。
watch	watch|w [entries...] [options]	运行 webpack 并监视文件更改。

构建

运行 webpack（默认命令，可省略）。

npx webpack build [options]

示例

npx webpack build --config ./webpack.config.js --stats verbose

初始化

用于使用 create-new-webpack-app 初始化一个新的 webpack 项目。

npx create-new-webpack-app [generation-path] [options]

示例

npx create-new-webpack-app ./my-app --force --template=default

别名

npx create-new-webpack-app init ./my-app --force --template=default

生成路径

生成配置文件的位置。默认为 process.cwd()。

选项

-t, --template

string = 'default'

要生成的模板名称。

-f, --force

boolean

在不提问的情况下生成项目。启用时，将使用每个问题的默认答案。

支持的模板

• --template=default - 带有基本配置的默认模板。
• --template=react - 带有 React 配置的模板。
• --template=vue - 带有 Vue 配置的模板。
• --template=svelte - 带有 Svelte 配置的模板。`

加载器

搭建一个加载器。

npx create-new-webpack-app loader [output-path] [options]

示例

npx create-new-webpack-app loader ./my-loader --template=default

输出路径

输出目录的路径，例如 ./loader-name。

选项

-t, --template

string = 'default'

模板类型。

插件

搭建一个插件。

npx create-new-webpack-app plugin [output-path] [options]

示例

npx create-new-webpack-app plugin ./my-plugin --template=default

输出路径

输出目录的路径，例如 ./plugin-name。

选项

-t, --template

string = 'default'

模板类型。

信息

输出系统信息。

npx webpack info [options]

示例

npx webpack info --output json --addition-package postcss

info 命令的选项

-a, --additional-package

string

在输出中添加额外的包。

示例

npx webpack info --additional-package postcss

-o, --output

string : 'json' | 'markdown'

以指定格式获取输出。

示例

npx webpack info --output markdown

配置测试

验证 webpack 配置。

npx webpack configtest [config-path]

示例

npx webpack configtest ./webpack.config.js

配置路径

您的 webpack 配置文件的路径。默认为 ./webpack.config.js。

服务

运行 webpack 开发服务器。

npx webpack serve [options]

示例

npx webpack serve --static --open

监视

运行 webpack 并监视文件更改。

npx webpack watch [options]

示例

npx webpack watch --mode development

标志

默认情况下，webpack 附带以下标志：

标志 / 别名	类型	描述
--entry	string[]	应用程序的入口点，例如 ./src/main.js
--config, -c	string[]	提供 webpack 配置文件的路径，例如 ./webpack.config.js
--config-name	string[]	要使用的配置名称
--name	string	配置的名称。在加载多个配置时使用
--color	boolean	在控制台启用颜色
--merge, -m	boolean	使用 webpack-merge 合并两个或更多配置
--env	string[]	当配置为函数时，传递给配置的环境
--config-node-env	string	将 process.env.NODE_ENV 设置为指定值
--progress	boolean, string	在构建期间打印编译进度
--help	boolean	输出支持的标志和命令列表
--output-path, -o	string	webpack 生成的文件的输出位置，例如 ./dist
--target, -t	string[]	设置构建目标
--watch, -w	boolean	监视文件更改
--watch-options-stdin	boolean	当标准输入流结束时停止监视
--devtool, -d	string	控制是否以及如何生成 Source Map。
--json, -j	boolean, string	以 JSON 格式打印结果或将其存储到文件中
--mode	string	定义传递给 webpack 的模式
--version, -v	boolean	获取当前版本
--stats	boolean, string	它指示 webpack 如何处理统计信息
--disable-interpret	boolean	禁用 interpret 以加载配置文件。
--fail-on-warnings	boolean	当 webpack 发出警告时，以非零退出代码停止 webpack-cli 进程
--analyze	boolean	它调用 webpack-bundle-analyzer 插件以获取打包信息
--extends, -e	string[]	扩展现有配置

取反标志

标志	描述
--no-color	禁用控制台上的所有颜色
--no-hot	如果您通过配置启用了热重载，则禁用它
--no-stats	禁用 webpack 发出的所有编译统计信息
--no-watch	不监视文件更改
--no-devtool	不生成 Source Map
--no-watch-options-stdin	当标准输入流结束时，不停止监视

核心标志

从 CLI v4 和 webpack v5 开始，CLI 从 webpack 核心导入整个配置 schema，允许从命令行调整几乎所有配置选项。

以下是 webpack v5 和 CLI v4 支持的所有核心标志列表 - 链接

例如，如果您想在项目中启用性能提示，您可以在配置中使用此选项，使用核心标志您可以执行以下操作：

npx webpack --performance-hints warning

用法

使用配置文件

npx webpack [--config webpack.config.js]

请参阅配置以了解配置文件中的选项。

不使用配置文件

npx webpack --entry <entry> --output-path <output-path>

示例

npx webpack --entry ./first.js --entry ./second.js --output-path /build

入口

一个或一组命名的文件名，作为构建项目的入口点。您可以传递多个入口（每个入口都在启动时加载）。以下是通过 CLI 指定入口文件（或多个文件）的多种方式：

npx webpack --entry-reset ./first-entry.js

npx webpack --entry-reset --entry ./first-entry.js

npx webpack --entry-reset ./first-entry.js ./other-entry.js

npx webpack --entry-reset --entry ./first-entry.js ./other-entry.js

输出路径

打包文件要保存的路径。它将映射到配置选项 output.path。

示例

如果您的项目结构如下：

.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js

npx webpack ./src/index.js --output-path dist

这将以 index.js 作为入口打包您的源代码，输出的打包文件路径将是 dist。

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 187 ms

npx webpack ./src/index.js ./src/others2.js --output-path dist/

这将以这两个文件作为独立的入口点形成打包文件。

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others2.js 1 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 198 ms

默认配置

CLI 将在您的项目路径中查找一些默认配置，以下是 CLI 查找的配置文件。

这是按优先级递增的查找顺序：

例如 - 配置文件的查找顺序将是 .webpack/webpackfile > .webpack/webpack.config.js > webpack.config.js

'webpack.config',
'.webpack/webpack.config',
'.webpack/webpackfile',

常用选项

帮助

列出 CLI 上可用的基本命令和标志

webpack help [command] [option] 和 webpack [command] --help 都是获取帮助的有效方式

npx webpack --help

# or

npx webpack help

列出 CLI 支持的所有命令和标志

npx webpack --help=verbose

查看特定命令或选项的帮助

npx webpack help --mode

版本

显示已安装包和子包的版本

要检查您正在使用的 webpack 和 webpack-cli 版本，请运行以下命令：

npx webpack --version

# or

npx webpack version

这将输出以下结果：

webpack 5.31.2
webpack-cli 4.6.0

如果您安装了 webpack-dev-server，它也会输出其版本。

webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

要检查任何 webpack-cli 子包（例如 `@webpack-cli/info`）的版本，请运行类似于以下的命令：

npx webpack info --version

这将输出以下结果：

@webpack-cli/info 1.2.3
webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

配置

使用配置文件构建源

指定不同于 webpack.config.js（默认配置文件之一）的配置文件。

npx webpack --config example.config.js

配置名称

如果您的配置文件导出了多个配置，您可以使用 `--config-name` 来指定要运行哪个配置。

考虑以下 webpack.config.js：

module.exports = [
  {
    output: {
      filename: './dist-first.js',
    },
    name: 'first',
    entry: './src/first.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-second.js',
    },
    name: 'second',
    entry: './src/second.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-third.js',
    },
    name: 'third',
    entry: './src/third.js',
    mode: 'none',
    stats: 'verbose',
  },
];

仅运行 second 配置：

npx webpack --config-name second

您也可以传递多个值：

npx webpack --config-name first --config-name second

合并

您可以借助 `--merge` 合并两个或更多不同的 webpack 配置。

npx webpack --config ./first.js --config ./second.js --merge

扩展

webpack-cli v5.1.0+

您可以借助 `--extends` 扩展现有 webpack 配置。

npx webpack --extends ./base.webpack.config.js

在扩展配置中了解更多信息。

JSON

以 JSON 格式打印 webpack 结果

npx webpack --json

如果您想将统计信息存储为 JSON 而不是打印出来，您可以使用：

npx webpack --json stats.json

在所有其他情况下，webpack 会打印一组显示打包文件、分块和时间细节的统计信息。使用此选项，输出可以是 JSON 对象。此响应被 webpack 的 分析工具、chrisbateman 的 webpack-visualizer 或 th0r 的 webpack-bundle-analyzer 接受。分析工具将接收 JSON 并以图形形式提供构建的所有详细信息。

环境选项

当 webpack 配置导出一个函数时，可以向其传递一个“环境”对象。

env

npx webpack --env production    # env.production = true

--env 参数接受多个值：

调用	结果环境
npx webpack --env prod	{ prod: true }
npx webpack --env prod --env min	{ prod: true, min: true }
npx webpack --env platform=app --env production	{ platform: "app", production: true }
npx webpack --env foo=bar=app	{ foo: "bar=app"}
npx webpack --env app.platform="staging" --env app.name="test"	{ app: { platform: "staging", name: "test" }

除了上面显示的自定义 `env` 之外，`env` 下还有一些内置的变量，可在您的 webpack 配置中使用：

环境变量	描述
WEBPACK_SERVE	如果正在使用 serve|server|s，则为 true。
WEBPACK_BUILD	如果正在使用 build|bundle|b，则为 true。
WEBPACK_WATCH	如果正在使用 --watch|watch|w，则为 true。

请注意，您无法在打包的代码中访问这些内置环境变量。

module.exports = (env, argv) => {
  return {
    mode: env.WEBPACK_SERVE ? 'development' : 'production',
  };
};

node-env

您可以使用 `--node-env` 选项来设置 process.env.NODE_ENV，它对用户代码和 webpack 配置都可用。

npx webpack --node-env production   # process.env.NODE_ENV = 'production'

config-node-env

webpack-cli v6.0.0+

用于设置 process.env.NODE_ENV 的--node-env 别名。

npx webpack --config-node-env production   # process.env.NODE_ENV = 'production'

当配置中未指定 mode 选项时，您可以使用 `--config-node-env` 选项来设置 mode。例如，使用 `--config-node-env production` 将同时把 process.env.NODE_ENV 和 mode 设置为 `'production'`。

如果您的配置导出一个函数，`--config-node-env` 的值将在函数返回后分配给 mode。这意味着 mode 将不会在函数参数（`env` 和 `argv`）中可用。但是，`--config-node-env` 的值可以作为函数内部的 `argv.nodeEnv` 访问，并可以相应地使用。

module.exports = (env, argv) => {
  console.log(argv.defineProcessEnvNodeEnv); // 'production' if --config-node-env production is used
  return {
    // your configuration
  };
};

配置选项

参数	解释	输入类型	默认值
--config	配置文件的路径	string[]	默认配置
--config-name	要使用的配置名称	string[]	-
--env	当配置为函数时，传递给配置的环境	string[]	-

分析打包文件

您还可以使用 webpack-bundle-analyzer 来分析 webpack 发出的输出打包文件。您可以使用 `--analyze` 标志通过 CLI 调用它。

npx webpack --analyze

进度

要检查任何 webpack 编译的进度，您可以使用 `--progress` 标志。

npx webpack --progress

要收集进度步骤的分析数据，您可以将 `profile` 作为值传递给 `--progress` 标志。

npx webpack --progress=profile

将 CLI 参数传递给 Node.js

要将参数直接传递给 Node.js 进程，您可以使用 `NODE_OPTIONS` 选项。

例如，将 Node.js 进程的内存限制增加到 4 GB：

NODE_OPTIONS="--max-old-space-size=4096" webpack

此外，您还可以向 Node.js 进程传递多个选项：

NODE_OPTIONS="--max-old-space-size=4096 -r /path/to/preload/file.js" webpack

退出码及其含义

退出码	描述
0	成功
1	来自 webpack 的错误
2	配置/选项问题或内部错误

CLI 环境变量

环境变量	描述
WEBPACK_CLI_SKIP_IMPORT_LOCAL	当为 true 时，它将跳过使用本地 webpack-cli 实例。
WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG	当为 true 时，它将强制加载 ESM 配置。
WEBPACK_PACKAGE	在 CLI 中使用自定义 webpack 版本。
WEBPACK_DEV_SERVER_PACKAGE	在 CLI 中使用自定义 webpack-dev-server 版本。
WEBPACK_CLI_HELP_WIDTH	为帮助输出使用自定义宽度。

WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm

WEBPACK_PACKAGE

在 CLI 中使用自定义 webpack 版本。考虑您的 package.json 中的以下内容：

{
  "webpack": "^4.0.0",
  "webpack-5": "npm:webpack@^5.32.0",
  "webpack-cli": "^4.5.0"
}

要使用 webpack v4.0.0：

npx webpack

要使用 webpack v5.32.0：

WEBPACK_PACKAGE=webpack-5 npx webpack

故障排除

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts

在使用 TypeScript 中的原生 ESM（即 package.json 中的 type: "module"）时，您可能会遇到此错误。

webpack-cli 支持 CommonJS 和 ESM 格式的配置，它首先尝试使用 require() 加载配置，一旦因错误代码 `'ERR_REQUIRE_ESM'`（此情况的特殊代码）而失败，它将尝试使用 import() 加载配置。然而，如果没有启用加载器钩子（在 TypeStrong/ts-node#1007 中描述），import() 方法将无法与 ts-node 一起工作。

要修复上述错误，请使用以下命令：

NODE_OPTIONS="--loader ts-node/esm" npx webpack --entry ./src/index.js --mode production

有关更多信息，请参阅我们关于使用 TypeScript 编写 webpack 配置的文档。