命令行界面

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

如果您还没有安装 webpack 和 CLI，请阅读 安装指南。

命令

webpack-cli 提供了各种命令，使使用 webpack 更轻松。默认情况下，webpack 附带

构建

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

npx webpack build [options]

示例

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

初始化

用于初始化一个新的 webpack 项目。

npx webpack init [generation-path] [options]

示例

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

生成路径

生成配置的路径。默认为 process.cwd()。

选项

-t, --template

string = 'default'

要生成的模板名称。

-f, --force

boolean

生成一个无需询问的项目。启用后，将使用每个问题的默认答案。

Loader

搭建一个 loader。

npx webpack loader [output-path] [options]

示例

npx webpack loader ./my-loader --template=default

输出路径

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

选项

-t, --template

string = 'default'

模板类型。

Plugin

搭建一个 plugin。

npx webpack plugin [output-path] [options]

示例

npx webpack plugin ./my-plugin --template=default

输出路径

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

选项

-t, --template

string = 'default'

模板类型。

信息

输出有关您系统的信息。

npx webpack info [options]

示例

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

信息选项

-a, --additional-package

字符串

将额外的包添加到输出中。

示例

npx webpack info --additional-package postcss

-o, --output

字符串：'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 附带以下标志

否定标志

核心标志

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

以下是 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 [命令] [选项] 和 webpack [命令] --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-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` 不同的 配置 文件，`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

您可以使用--merge合并两个或多个不同的 webpack 配置。

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

extends

您可以使用--extends扩展现有的 webpack 配置。

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

json

将 webpack 的结果打印为 JSON。

npx webpack --json

如果您想将统计信息存储为 json 而不是打印它，您可以使用 -

npx webpack --json stats.json

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

环境选项

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

env

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

--env 参数接受多个值

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

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

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'

define-process-env-node-env

适用于webpack-cli v5+。

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

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

配置选项

分析捆绑包

您还可以使用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

退出代码及其含义

CLI 环境变量

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]: ./webpack.config.ts 的未知文件扩展名“.ts”

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

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

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

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

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