命令行接口

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

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

使用配置文件的用法

webpack [--config webpack.config.js]

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

不使用配置文件的用法

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

<entry>

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

<output>

要保存的 bundled 文件的路径和文件名。它将映射到配置选项 output.path 和 output.filename。

示例

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

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

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

打包源码，入口为 index.js，并且输出文件的路径为 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 index=./src/index.js entry2=./src/index2.js dist/bundle.js

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

    | Asset     | Size    | Chunks        | Chunk Names   |
    |-----------|---------|---------------|---------------|
    | bundle.js | 1.55 kB | 0,1 [emitted] | index, entry2 |
    [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 参数具有多种语法 accepts various syntaxes:

See the environment variables guide for more information on its usage.

配置选项

输出配置

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

示例用法

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。

模块配置

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

Watch 选项

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

性能优化配置

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

Resolve 配置

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

统计数据配置

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

高级配置

简写

Profiling

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

webpack --profile

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

For each module, the following details are included in the output as applicable:

• factory: time to collect module metadata (e.g. resolving the filename)
• building: time to build the module (e.g. loaders and parsing)
• dependencies: time to identify and connect the module’s dependencies

Paired with --progress, --profile gives you an in depth idea of which step in the compilation is taking how long. This can help you optimise your build in a more informed manner.

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
⋮

进一步阅读

• Analyzing Build Statistics
• Three simple ways to inspect a webpack bundle
• Optimising your application bundle size with webpack
• Analyzing & optimizing your webpack bundle
• Analysing and minimising the size of client side bundle with webpack and source-map-explorer

贡献人员

EugeneHlushko byzyk chenxsan ev1stensberg madhavarshney rencire simon04 tbroadley