命令行接口 | Command Line Interface

Command Line Interface

为了正确使用和轻松分发此配置，可以使用webpack配置webpack webpack.config.js。发送到CLI的任何参数都将映射到配置文件中的相应参数。

如果您还没有安装webpack，请查看安装指南。

webpack 的新版CLI客户端正在开发中，诸如`--init` 标识符 等新特性都将新增进来。 更多详情!

用于配置文件

webpack [--config webpack.config.js]

见配置为配置文件中的选项。

在无配置文件情况下使用Webpack

webpack <entry> [<entry>] <output>

<entry>

一个文件名或一组命名文件名，充当您构建项目的入口点。您可以传递多个条目（每个条目在启动时加载）。如果您在表单中传递一对，<name>=<request>您可以创建一个额外的入口点。它将被映射到配置选项entry。

<output>

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

例

如果你的项目结构如下 - 

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

webpack src/index.js 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]

常用选项

列出cli上的所有可用选项

webpack --help
webpack -h

使用配置文件构建源代码

指定一个不同的配置文件来提取。如果您要指定webpack.config.js与默认值不同的值，请使用此值。

webpack --config example.config.js

将webpack的结果打印为JSON

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

在其他任何情况下，webpack会打印出一组显示捆绑，块和时间细节的统计数据。使用此选项，输出可以是JSON对象。webpack的分析工具或chrisbateman的webpack-visualizer或th0r的webpack-bundle-analyzer都可以接受此响应。分析工具将采用JSON并以图形形式提供构建的所有细节。

环境选项

当webpack配置导出函数时，可以将“环境”传递给它。

webpack --env.production    # sets env.production == true
webpack --env.platform=web  # sets env.platform == "web"

该--env参数接受各种语法：

InvocationResulting environment
webpack --env prod"prod"
webpack --env.prod{ prod: true }
webpack --env.prod=1{ prod: 1 }
webpack --env.prod=foo{ prod: "foo" }
webpack --env.prod --env.min{ prod: true, min: true }
webpack --env.prod --env min{ prod: true }, "min"
webpack --env.prod=foo --env.prod=bar{prod: "foo", "bar" }

有关其用法的更多信息，请参阅环境变量指南。

输出选项

这组选项允许您操作构建的某些输出参数。

参数说明输入类型默认
--output-块，文件名其他块的输出文件名串具有ID而不是名称或ID前缀的文件名
--output文件名该包的输出文件名串name.js
--output-JSONP功能用于块加载的JSONP函数的名称串webpackJsonp
--output库将入口点的导出显示为库串​
--output库目标用于显示条目导出的类型，指向库串是
--output路径编译资产的输出路径串当前目录
--output-PATHINFO包含对每个依赖项的请求的评论布尔假
--output公共路径资产的公共途径串/
--output - 源地图文件名SourceMap的输出文件名串name.map或outputFilename.map

使用示例

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]

调试选项

这组选项允许您更好地调试包含使用webpack编译的资产的应用程序

参数说明输入类型默认值
--debug将装载机切换到调试模式布尔假
--devtool定义绑定资源的源映射类型串-
- 进展以百分比打印编译进度布尔假

模块选项

这些选项允许您按照webpack允许的方式绑定模块

参数说明用法
--module绑定将扩展绑定到加载器--module-bind js = babel-loader
--module绑定，后将扩展名绑定到后期加载程序​
--module绑定预将扩展绑定到预加载器​

观看选项

这些选项使构建监视依赖关系图文件中的更改并再次执行构建。

参数说明
- 观察，-w观察文件系统的变化
- 保存，-s不管更改如何，重新编译保存
--watch聚集型超时观看时收集更改超时
--watch轮询观看的轮询间隔（也启用轮询）
- watch-stdin，--stdin标准输入关闭时退出进程

优化选项

这些选项允许您使用webpack操作生产版本的优化

参数说明使用插件
--optimize-MAX-块尽量保持块数低于限制LimitChunkCountPlugin
--optimize分钟的块大小尽量保持块大小超过限制MinChunkSizePlugin
--optimize-减少最小化JavaScript并切换加载器以最小化UglifyJsPlugin＆LoaderOptionsPlugin

解决选项

这些允许您使用别名和扩展名配置webpack解析器。

参数说明例
--resolve别名设置模块别名进行解析--resolve-alias jquery-plugin = jquery.plugin
--resolve的扩展应该用来解析模块的安装程序扩展--resolve-extensions .es6 .js .ts
--resolve装载机别名最小化JavaScript并切换加载器以最小化​

统计选项

这些选项允许webpack显示各种统计信息，并在控制台输出中以不同的样式显示。

参数说明类型
- 色彩， - 色彩启用/禁用控制台上的颜色默认值:(支持颜色）布尔
- 显示选择显示预设（详细，详细，正常，最小，仅错误，无;自webpack 3.0.0以来）串
--display缓存在输出中显示缓存的模块布尔
--display缓存资产还显示输出中的资产缓存布尔
--display-块在输出中显示块布尔
--display深入显示每个模块入口点的距离布尔
--display-入口点在输出中显示入口点布尔
--display-错误的详细信息显示有关错误的详情布尔
--display-排除排除输出中的模块布尔
--display-MAX模块设置输出中可见模块的最大数量数
--display模块在输出中甚至显示排除的模块布尔
--display优化，救助范围提升回退触发器（自webpack 3.0.0起）布尔
--display-起源在输出中显示块的起源布尔
--display提供的出口显示从模块提供的导出信息布尔
--display-原因显示输出中模块包含的原因布尔
--display-用于出口显示有关模块中使用的导出的信息（Tree Shaking）布尔
--hide模块隐藏有关模块的信息布尔
--sort资产，由资产列表按资产属性排序串
--sort-块，由按块中的属性对块列表进行排序串
--sort模块逐按模块中的属性对模块列表进行排序串
--verbose显示更多细节布尔

高级选项

参数说明用法
- 保释第一个错误中止编译​
--cache在内存缓存中启用默认情况下启用观看--cache = FALSE
--define定义任何自由变量，请参阅匀场--define process.env.NODE_ENV ='开发'
- 热启用热模块更换--hot =真
--labeled模块启用标记的模块使用LabeledModulesPlugin​
- 插入加载这个插件​
--prefetch预取特定文件--prefetch =。/ files.js
- 提供将这些模块提供为全局变量，请参阅shimming- 提供jQuery = jquery
--records输入路径记录文件的路径（阅读）​
--records输出路径记录文件的路径（写入）​
--records路径记录文件的路径​
- 目标目标执行环境--target = '节点'

Shortcuts

快捷键替代对象
-d--debug --devtool cheap-module-eval-source-map --output-pathinfo
-p--optimize-minimize --define process.env.NODE_ENV =“production”，参见building for production

剖析

该--profile选项捕获编译每一步的时序信息，并将其包含在输出中。

webpack --profile

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

对于每个模块，输出中包含以下详细信息（如果适用）：

  • factory: time to collect module metadata (e.g. resolving the filename)

  • 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
⋮