为了更合适且方便地使用配置，可以在 webpack.config.js 中对 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]

描述：输出有关系统的信息。

• init

使用：init|c [scaffold...] [options]

描述：初始化一个新的 webpack 配置。

• loader

使用：loader|l [output-path]

描述：生成一个 loader 仓库。

• plugin

使用：plugin|p [output-path]

描述：生成一个 plugin 仓库。

• serve

使用：serve|s [options]

描述：运行 webpack-dev-server.

• version

使用：version|v [commands...]

描述：输出 webpack，webpack-cli 以及 webpack-dev-server 的版本信息。

• watch

使用：watch|w [entries...] [options]

描述：运行 webpack 并监听文件变化。

init

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

npx webpack init [generation-path] [options]

示例：

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

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

配置：

--template string = default 要生成的模板名称。

--force boolean 生成项目时不启用选项模式。当为 true 时，所有命令行选项使用默认值。

参数列表

默认情况下，webpack 提供了以下 flag：

• --entry

类型：string[]

描述：应用程序的入口文件，例如 ./src/main.js

• --config/-c

类型：string[]

描述：提供 webpack 配置文件的路径，例如 ./webpack.config.js

• --config-name

类型：string[]

描述：要使用的配置名

• --name

类型：string

描述：配置名称，在加载多个配置时使用

• --color

类型：boolean

描述：启用控制台颜色

• --merge/-m

类型：boolean

描述：使用 webpack-merge 合并两个配置文件，例如 -c ./webpack.config.js -c ./webpack.test.config.js

• --env

类型：string[]

描述：当它是一个函数时，传递给配置的环境变量

• --progress

类型：boolean, string

描述：在构建过程中打印编译进度

• --help

类型：boolean

描述：输出所有支持的 flag 和命令

• --output-path/-o

类型：string

描述：webpack 生成文件的输出位置，例如 ./dist

• --target/-t

类型：string[]

描述：设置要构建的 target

• --watch/-w

类型：boolean

描述：监听文件变化

• --watch-options-stdin

类型：boolean

描述：stdin stream 结束时，停止监听

• --hot/-h

类型：boolean

描述：启用 HMR

• --devtool/-d

类型：string

描述：控制是否生成 source map，以及如何生成

• --prefetch

类型：string

描述：预先发生请求

• --json/-j

类型：boolean, string

描述：将结果打印成 JSON 格式或存储在文件中

• --mode

类型： string

描述：定义 webpack 所需的 mode

• --version/-v

类型： boolean

描述：获取当前 cli 版本

• --stats

类型： boolean, string

描述：它告诉 webpack 如何处理 stats

• --analyze

类型： boolean

描述：它调用 webpack-bundle-analyzer 插件来获取 bundle 信息

禁用类型参数

• --no-color

描述：禁用控制台颜色

• --no-hot

描述：如果你通过配置启用了 HMR，则禁用它

• --no-stats

描述：禁用任何由 webpack emit 出来的 stats

• --no-watch

描述：禁用文件变更的监听

• --no-devtool

描述：禁止生成 source maps

核心参数

从 CLI v4 和 webpack v5 开始，CLI 将采用从 webpack 的 core 中导入整个配置的模式，允许 CLI 调整几乎所有配置项。

webpack v5 和 CLI v4 支持的所有核心 flag 列表：
https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md

例如，如果你想在项目中启用性能提示，你需在配置中使用此选项，而如果使用核心 flag，你可以这样做：

npx webpack --performance-hints warning

用法

• 使用配置文件

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

• 不使用配置文件

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

示例

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

--entry

构建项目时入口可以配置一个文件名或一组被命名过的文件名。你可以传递多个入口（每个入口在启动时加载）。 如下是通过 CLI 指定 entry 的多种方式：

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

使用 webpack [command] [entries...] [option] 语法，主要是因为某些选项支持接受多个值。因此，你可以用 webpack --target node ./entry.js 表示 target: ['node', './file.js']。

--output

用于存储构建后的文件路径。它将映射到配置选项 output.path

• 示例

假设你的项目结构像下面这样：

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

执行命令：

npx webpack ./src/index.js -o dist

这将对源码进行打包，其入口为 index.js，且 bundle 文件的输出路径为 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 -o 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',

通用配置

注意，命令行接口（Command Line Interface）参数的优先级，高于配置文件参数。例如，如果将 --mode="production" 传入 webpack CLI，而配置文件使用的是 development，最终会使用 production。

• help

列出命令行可用的基础命令和参数

通过 webpack help [command] [option] 以及 webpack [command] --help 均可获得帮助信息：

npx webpack --help

# or

npx webpack help

列出所有 cli 支持的命令和参数

npx webpack --help=verbose

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

npx webpack help --mode

• version

显示已安装的 package 以及子 package 的版本。

如需检查你正在使用的 webpack 和 webpack-cli 的版本，只需运行如下命令：

npx webpack --version

# or

npx webpack version

运行结果如下：

webpack 5.11.1
webpack-cli 4.3.1

若已安装 webpack-dev-server，其版本信息会一并输出：

webpack 5.11.1
webpack-cli 4.3.1
webpack-dev-server 3.11.1

如需检查 webpack-cli 子包的版本（如 @webpack-cli/init），只需运行如下命令：

npx webpack init --version

运行结果如下：

@webpack-cli/init 1.0.3
webpack-cli 4.2.0
webpack 5.4.0

• config

使用配置文件进行构建。

配置文件默认为 webpack.config.js，还可以指定其它的配置文件。

npx webpack --config example.config.js

• config-name

如果你的配置文件导出了多个配置，你可以使用 --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',
  },
];

并且只想运行第二个配置项：

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

• json

以 JSON 格式输出 webpack 的运行结果

npx webpack --json

如果你想把 stats 数据存储为 JSON 而非输出，你可以使用：

npx webpack --json stats.json

在其他情况下，webpack 会打印出 bundle、chunk 以及 timing 细节的 stats 信息。使用此选项，会输出 JSON 对象。这个输出结果可以被 webpack 的 analyse 工具，或者 chrisbateman 的 webpack-visualizer，再或者 th0r 的 webpack-bundle-analyzer 所识别。analyse 工具会接收 JSON，并以图形的形式展示所有构建的细节。

环境变量选项

当 webpack 配置导出为函数时，会接收到一个 "environment" 的参数。

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 app.platform="staging" --env app.name="test"：返回结果{ app: { platform: "staging", name: "test" }

NODE_ENV

你可以使用 --node-env 选项来设置 process.env.NODE_ENV：

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

如果你不明确的设置 mode，mode 选项的值会被 --node-env 覆盖。例如 --node-env production 时，会把 process.env.NODE_ENV 和 mode 均设置为 'production'

分析 Bundle

你可以使用 webpack-bundle-analyzer 插件来分析你 webpack 输出的 bundle。你还可以通过 CLI 的 --analyze flag 调用它。

npx webpack --analyze

请确保你的项目中安装了 webpack-bundle-analyzer，否则 CLI 会提示你安装它。

Progress

如需查看 webpack 的编译进度，你可以使用 --progress 参数。

npx webpack --progress

如需收集编译过程中每一步的 profile 数据，你可以将 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 Error
• 2：配置/选项问题，或者内部错误

环境变量

• WEBPACK_SERVE：如果设置了 serve|s，则为 true。
• WEBPACK_BUILD：如果设置了 build|bundle|b，则为 true
• WEBPACK_WATCH：如果设置了 --watch|watch|w，则为 true

你可以在你的 webpack 配置中使用上述环境变量：

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

禁止在 bundle 代码中访问上述变量。