命令行接口

为了更合适且方便地使用配置,可以在 webpack.config.js 中对 webpack 进行配置。CLI 中传入的任何参数会在配置文件中映射为对应的参数。

如果你还没有安装过 webpack 和 CLI,请先阅读 安装指南

使用配置文件的用法

webpack [--config webpack.config.js]

配置文件中的相关选项,请参阅配置

不使用配置文件的用法

webpack <entry> [<entry>] -o <output>

<entry>

构建项目时入口可以配置一个文件名或一组被命名过的文件名。你可以传递多个入口(每个入口在启动时加载)。如果传递一个形式为 <name> = <request> 的键值对,则可以创建一个额外的入口起点。它将被映射到配置选项(configuration option)的 entry 属性中。

<output>

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

示例

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

.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js
webpack src/index.js -o dist/bundle.js

这将对源码进行打包,其入口为 index.js,且 bundle 文件的输出路径为 dist,文件名为 bundle.js

	| Asset     | Size    | Chunks      | Chunk Names |
	|-----------|---------|-------------|-------------|
	| bundle.js | 1.54 kB | 0 [emitted] | index       |
	[0] ./src/index.js 51 bytes {0} [built]
	[1] ./src/others.js 29 bytes {0} [built]
webpack ./src/index.js ./src.index2.js -o dist/bundle.js

以多个入口的方式打包文件

	| Asset     | Size    | Chunks        | Chunk Names   |
	|-----------|---------|---------------|---------------|
	| bundle.js | 1.55 kB | 0,1 [emitted] | index, index2 |
	[0] ./src/index.js 51 bytes {0} [built]
	[0] ./src/index2.js 54 bytes {1} [built]
	[1] ./src/others.js 29 bytes {0} {1} [built]

常用配置

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

列出命令行所有可用的配置选项

webpack --help
webpack -h

使用配置文件进行构建

指定其它的配置文件。配置文件默认为 webpack.config.js,如果你想使用其它配置文件,可以加入这个参数。

webpack --config example.config.js

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

webpack --json
webpack --json > stats.json

在其他每个情况下,webpack 会打印一组统计信息,用于显示 bundle, chunk 和用时等详细信息。使用此选项,输出可以是 JSON 对象。此输出文件(response)可被 webpack 的分析工具、chrisbateman 的 webpack 可视化工具或 th0r 的 webpack bundle 分析工具接收后进行分析。分析工具将接收 JSON 并以图形形式提供构建的所有细节。

环境选项

当 webpack 配置对象导出为一个函数时,可以向其传入一个 "环境对象(environment)"。

webpack --env.production    # 设置 env.production == true
webpack --env.platform=web  # 设置 env.platform == "web"

--env 参数具有多种语法:

调用 结果环境

调用

结果环境

webpack --env prod

"prod"

"prod"

调用

结果环境

webpack --env.prod

{ prod: true }

{ prod: true }

调用

结果环境

webpack --env.prod=1

{ prod: 1 }

{ prod: 1 }

调用

结果环境

webpack --env.prod=foo

{ prod: "foo" }

{ prod: "foo" }

调用

结果环境

webpack --env.prod --env.min

{ prod: true, min: true }

{ prod: true, min: true }

调用

结果环境

webpack --env.prod --env min

[{ prod: true }, "min"]

[{ prod: true }, "min"]

调用

结果环境

webpack --env.prod=foo --env.prod=bar

{prod: [ "foo", "bar" ]}

{prod: [ "foo", "bar" ]}

参阅环境变量指南获取更多使用方法。

配置选项

参数 说明 输入类型 默认值

参数

说明

输入类型

默认值

--config

配置文件的路径

配置文件的路径 string webpack.config.jswebpackfile.js

参数

说明

输入类型

默认值

--config-register, -r

在 webpack 配置文件加载前先预加载一个或多个模块

在 webpack 配置文件加载前先预加载一个或多个模块 array

参数

说明

输入类型

默认值

--config-name

要使用的配置名称

要使用的配置名称 string

参数

说明

输入类型

默认值

--env

当配置文件是一个函数时,会将环境变量传给这个函数

当配置文件是一个函数时,会将环境变量传给这个函数

参数

说明

输入类型

默认值

--mode

用到的模式

用到的模式 string 'production'

输出配置

通过以下这些配置,你可以调整构建流程的某些输出参数。

参数 说明 输入类型 默认值

参数

说明

输入类型

默认值

--output-chunk-filename

输出的附带 chunk 的文件名

输出的附带 chunk 的文件名 string 含有 [ id ] 的文件名,而不是 [ name ] 或者 [ id ] 作为前缀

参数

说明

输入类型

默认值

--output-filename

打包文件的文件名

打包文件的文件名 string [name].js

参数

说明

输入类型

默认值

--output-jsonp-function

加载 chunk 时使用的 JSONP 函数名

加载 chunk 时使用的 JSONP 函数名 string webpackJsonp

参数

说明

输入类型

默认值

--output-library

以库的形式导出入口文件

以库的形式导出入口文件 string

参数

说明

输入类型

默认值

--output-library-target

以库的形式导出入口文件时,输出的类型

以库的形式导出入口文件时,输出的类型 string var

参数

说明

输入类型

默认值

--output-path

输出的路径(在公共路径的基础上)

输出的路径(在公共路径的基础上) string 当前目录

参数

说明

输入类型

默认值

--output-pathinfo

加入一些依赖信息的注解

加入一些依赖信息的注解 boolean false

参数

说明

输入类型

默认值

--output-public-path

输出文件时使用的公共路径

输出文件时使用的公共路径 string /

参数

说明

输入类型

默认值

--output-source-map-filename

生成的 SourceMap 的文件名

生成的 SourceMap 的文件名 string [name].map 或者 [outputFilename].map

参数

说明

输入类型

默认值

--build-delimiter

在构建输出之后,显示的自定义文本

在构建输出之后,显示的自定义文本 string 默认字符串是 null。你可以提供一个 === Build done === 这样的字符串

示例用法

webpack index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js'

| Asset                                | Size    | Chunks      | Chunk Names   |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js |  2.6 kB | 0 [emitted] | index2        |
| index740fdca26e9348bedbec.bundle.js  | 2.59 kB | 1 [emitted] | index         |
	[0] ./src/others.js 29 bytes {0} {1} [built]
	[1] ./src/index.js 51 bytes {1} [built]
	[2] ./src/index2.js 54 bytes {0} [built]
webpack.js index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js' --devtool source-map --output-source-map-filename='[name]123.map'

| Asset                                | Size    | Chunks      | Chunk Names   |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js | 2.76 kB | 0 [emitted] | index2        |
|  index740fdca26e9348bedbec.bundle.js | 2.74 kB | 1 [emitted] | index         |
|                        index2123.map | 2.95 kB | 0 [emitted] | index2        |
|                         index123.map | 2.95 kB | 1 [emitted] | index         |
	[0] ./src/others.js 29 bytes {0} {1} [built]
	[1] ./src/index.js 51 bytes {1} [built]
	[2] ./src/index2.js 54 bytes {0} [built]

Debug 配置

以下这些配置可以帮助你在 Webpack 编译过程中更好地 debug。

参数 说明 输入类型 默认值

参数

说明

输入类型

默认值

--debug

把 loader 设置为 debug 模式

把 loader 设置为 debug 模式 boolean false

参数

说明

输入类型

默认值

--devtool

为打包好的资源定义 [source map 的类型]

为打包好的资源定义 [ source map 的类型 ] string -

参数

说明

输入类型

默认值

--progress

打印出编译进度的百分比值

打印出编译进度的百分比值 boolean false

参数

说明

输入类型

默认值

--display-error-details

展示错误细节

展示错误细节 boolean false

模块配置

这些配置可以用于绑定 Webpack 允许的模块

参数 说明 用法

参数

说明

用法

--module-bind

为 loader 绑定一个文件扩展

为 loader 绑定一个文件扩展 --module-bind js=babel-loader

参数

说明

用法

--module-bind-post

为 post loader 绑定一个文件扩展

为 post loader 绑定一个文件扩展

参数

说明

用法

--module-bind-pre

为 pre loader 绑定一个文件扩展

为 pre loader 绑定一个文件扩展

Watch 选项

这些配置可以用于观察依赖文件的变化,一旦有变化,则可以重新执行构建流程。

参数 说明

参数

说明

--watch, -w

观察文件系统的变化

观察文件系统的变化

参数

说明

--watch-aggregate-timeout

指定一个毫秒数,在这个时间内,文件若发送了多次变化,会被合并

指定一个毫秒数,在这个时间内,文件若发送了多次变化,会被合并

参数

说明

--watch-poll

轮询观察文件变化的时间间隔(同时会打开轮询机制)

轮询观察文件变化的时间间隔(同时会打开轮询机制)

参数

说明

--watch-stdin, --stdin

当 stdin 关闭时,退出进程

当 stdin 关闭时,退出进程

性能优化配置

在生产环境的构建时,这些配置可以用于调整 webpack 的一些性能相关的配置。

参数 说明 使用的插件

参数

说明

使用的插件

--optimize-max-chunks

限制 chunk 的数量

限制 chunk 的数量 LimitChunkCountPlugin

参数

说明

使用的插件

--optimize-min-chunk-size

限制 chunk 的最小体积

限制 chunk 的最小体积 MinChunkSizePlugin

参数

说明

使用的插件

--optimize-minimize

压缩混淆 javascript,并且把 loader 设置为 minimizing

压缩混淆 javascript,并且把 loader 设置为 minimizing TerserPlugin

Resolve 配置

这些配置可以用于设置 webpack resolver 时使用的别名(alias)和扩展名(extension)。

参数 说明 示例

参数

说明

示例

--resolve-alias

指定模块的别名

指定模块的别名 --resolve-alias jquery-plugin=jquery.plugin

参数

说明

示例

--resolve-extensions

指定需要被处理的文件的扩展名

指定需要被处理的文件的扩展名 --resolve-extensions .es6 .js .ts

参数

说明

示例

--resolve-loader-alias

最小化 JavaScript,并且将 loader 切换到最简

最小化 JavaScript,并且将 loader 切换到最简

统计数据配置

以下选项用于配置 Webpack 在控制台输出的统计数据,以及这些数据的样式。

参数 说明 类型

参数

说明

类型

--color, --colors

强制在控制台开启颜色 [默认:仅对 TTY 输出启用]

强制在控制台开启颜色 [ 默认:仅对 TTY 输出启用 ] boolean

参数

说明

类型

--no-color, --no-colors

强制在控制台关闭颜色

强制在控制台关闭颜色 boolean

参数

说明

类型

--display

选择显示预设(verbose - 繁琐, detailed - 细节, normal - 正常, minimal - 最小, errors-only - 仅错误, none - 无; 从 webpack 3.0.0 开始)

选择 显示预设 (verbose - 繁琐, detailed - 细节, normal - 正常, minimal - 最小, errors-only - 仅错误, none - 无; 从 webpack 3.0.0 开始) string

参数

说明

类型

--display-cached

在输出中显示缓存的模块

在输出中显示缓存的模块 boolean

参数

说明

类型

--display-cached-assets

在输出中显示缓存的 assets

在输出中显示缓存的 assets boolean

参数

说明

类型

--display-chunks

在输出中显示 chunks

在输出中显示 chunks boolean

参数

说明

类型

--display-depth

显示从入口起点到每个模块的距离

显示从入口起点到每个模块的距离 boolean

参数

说明

类型

--display-entrypoints

在输出中显示入口文件

在输出中显示入口文件 boolean

参数

说明

类型

--display-error-details

显示详细的错误信息

显示详细的错误信息 boolean

参数

说明

类型

--display-exclude

在输出中显示被排除的文件

在输出中显示被排除的文件 boolean

参数

说明

类型

--display-max-modules

设置输出中可见模块的最大数量

设置输出中可见模块的最大数量 number

参数

说明

类型

--display-modules

在输出中显示所有模块,包括被排除的模块

在输出中显示所有模块,包括被排除的模块 boolean

参数

说明

类型

--display-optimization-bailout

作用域提升回退触发器(Scope hoisting fallback trigger)(从 webpack 3.0.0 开始)

作用域提升回退触发器(Scope hoisting fallback trigger)(从 webpack 3.0.0 开始) boolean

参数

说明

类型

--display-origins

在输出中显示最初的 chunk

在输出中显示最初的 chunk boolean

参数

说明

类型

--display-provided-exports

显示有关从模块导出的信息

显示有关从模块导出的信息 boolean

参数

说明

类型

--display-reasons

显示模块包含在输出中的原因

显示模块包含在输出中的原因 boolean

参数

说明

类型

--display-used-exports

显示模块中被使用的接口(Tree Shaking)

显示模块中被使用的接口(Tree Shaking) boolean

参数

说明

类型

--hide-modules

隐藏关于模块的信息

隐藏关于模块的信息 boolean

参数

说明

类型

--sort-assets-by

对 assets 列表以某种属性排序

对 assets 列表以某种属性排序 string

参数

说明

类型

--sort-chunks-by

对 chunks 列表以某种属性排序

对 chunks 列表以某种属性排序 string

参数

说明

类型

--sort-modules-by

对模块列表以某种属性排序

对模块列表以某种属性排序 string

参数

说明

类型

--verbose

显示更多信息

显示更多信息 boolean

高级配置

参数 说明 用法

参数

说明

用法

--bail

一旦发生错误,立即终止

一旦发生错误,立即终止

参数

说明

用法

--cache

开启缓存 [watch 时会默认打开]

开启缓存 [ watch 时会默认打开 ] --cache=false

参数

说明

用法

--define

定义 bundle 中的任意自由变量,查看 shimming

定义 bundle 中的任意自由变量,查看 shimming --define process.env.NODE_ENV="'development'"

参数

说明

用法

--hot

开启模块热替换

开启 模块热替换 --hot=true

参数

说明

用法

--labeled-modules

开启模块标签 [使用 LabeledModulesPlugin]

开启模块标签 [ 使用 LabeledModulesPlugin ]

参数

说明

用法

--live-reload

开启实时重载

开启实时重载 --live-reload=true

参数

说明

用法

--plugin

加载某个插件

加载某个 插件

参数

说明

用法

--prefetch

预加载某个文件

预加载某个文件 --prefetch=./files.js

参数

说明

用法

--provide

在所有模块中将这些模块提供为自由变量,查看 shimming

在所有模块中将这些模块提供为自由变量,查看 shimming --provide jQuery=jquery

参数

说明

用法

--records-input-path

记录文件的路径(读取)

记录文件的路径(读取)

参数

说明

用法

--records-output-path

记录文件的路径(写入)

记录文件的路径(写入)

参数

说明

用法

--records-path

记录文件的路径

记录文件的路径

参数

说明

用法

--target

目标的执行环境

目标 的执行环境 --target='node'

简写

简写 含义

简写

含义

-d

--debug --devtool cheap-module-eval-source-map --output-pathinfo

--debug --devtool cheap-module-eval-source-map --output-pathinfo

简写

含义

-p

--mode production,查阅构建生产环境

--mode production ,查阅 构建生产环境

Profiling

--profile 选项捕获编译时每个步骤的时间信息,并且将这些信息包含在输出中。

webpack --profile

⋮
[0] ./src/index.js 90 bytes {0} [built]
    factory:22ms building:16ms = 38ms

对于每个模块,输出中将根据具体情况包含以下信息:

  • factory: 收集模块元数据的时间(如:解析文件名)
  • building: 构建模块的时间(如:加载和解析)
  • dependencies: 识别和连接模块依赖关系的时间

--progress 搭配使用,--profile 可以让你深入了解编译过程中哪一步需要多长时间。这可以帮助你以更明智的方式优化你的构建。

webpack --progress --profile

30ms building modules
1ms sealing
1ms optimizing
0ms basic module optimization
1ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
1ms module reviving
0ms module order optimization
1ms module id optimization
1ms chunk reviving
0ms chunk order optimization
1ms chunk id optimization
10ms hashing
0ms module assets processing
13ms chunk assets processing
1ms additional chunk assets processing
0ms recording
0ms additional asset processing
26ms chunk asset optimization
1ms asset optimization
6ms emitting
⋮

将 CLI 参数传递给 Node.js

将参数直接传递给 Node.js 进程,你可以使用 --node-args 选项。所有其他的标志和选项将由 webpack-cli 接收。

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

webpack --node-args="--max-old-space-size=4096"

此外,你也可以将多个选项传递给 Node.js 进程。

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