命令行接口 | 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.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参数接受各种语法：

Invocation	Resulting 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
⋮