Command Line Interface

For proper usage and easy distribution of this configuration, webpack can be configured with webpack.config.js. Any parameters sent to the CLI will map to a corresponding parameter in the configuration file.

Read the installation guide if you don't already have webpack and CLI installed.

Usage with configuration file

webpack [--config webpack.config.js]

See configuration for the options in the configuration file.

Usage without configuration file

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

<entry>

A filename or a set of named filenames which act as the entry point to build your project. You can pass multiple entries (every entry is loaded on startup). If you pass a pair in the form <name>=<request>, you can create an additional entry point. It will be mapped to the configuration option entry.

<output>

A path and filename for the bundled file to be saved in. It will be mapped to the configuration options output.path and output.filename.

Example

If your project structure is as follows -

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

This will bundle your source code with entry as index.js, and the output bundle file will have a path of dist, and the filename will be 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

This will form the bundle with both the files as separate entry points.

	| 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]

Common Options

Note that Command Line Interface has a higher precedence for the arguments you use it with than your configuration file. For instance, if you pass --mode="production" to webpack CLI and your configuration file uses development, production will be used.

List all of the options available on the cli

webpack --help
webpack -h

Build source using a configuration file

Specifies a different configuration file to pick up. Use this if you want to specify something different from webpack.config.js, which is the default.

webpack --config example.config.js

Print result of webpack as a JSON

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

In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option, the output can be a JSON object. This response is accepted by webpack's analyse tool, or chrisbateman's webpack-visualizer, or th0r's webpack-bundle-analyzer. The analyse tool will take in the JSON and provide all the details of the build in graphical form.

Environment Options

When the webpack configuration exports a function, an "environment" may be passed to it.

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

The --env argument accepts various syntaxes:

Invocation Resulting environment

Invocation

Resulting environment

webpack --env prod

"prod"

"prod"

Invocation

Resulting environment

webpack --env.prod

{ prod: true }

{ prod: true }

Invocation

Resulting environment

webpack --env.prod=1

{ prod: 1 }

{ prod: 1 }

Invocation

Resulting environment

webpack --env.prod=foo

{ prod: "foo" }

{ prod: "foo" }

Invocation

Resulting environment

webpack --env.prod --env.min

{ prod: true, min: true }

{ prod: true, min: true }

Invocation

Resulting environment

webpack --env.prod --env min

[{ prod: true }, "min"]

[{ prod: true }, "min"]

Invocation

Resulting environment

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

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

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

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

Configuration Options

Parameter Explanation Input type Default

Parameter

Explanation

Input type

Default

--config

Path to the configuration file

Path to the configuration file string webpack.config.js or webpackfile.js

Parameter

Explanation

Input type

Default

--config-register, -r

Preload one or more modules before loading the webpack configuration

Preload one or more modules before loading the webpack configuration array

Parameter

Explanation

Input type

Default

--config-name

Name of the configuration to use

Name of the configuration to use string

Parameter

Explanation

Input type

Default

--env

Environment passed to the configuration, when it is a function

Environment passed to the configuration, when it is a function

Parameter

Explanation

Input type

Default

--mode

Mode to use

Mode to use string 'production'

Output Options

This set of options allows you to manipulate certain output parameters of your build.

Parameter Explanation Input type Default

Parameter

Explanation

Input type

Default

--output-chunk-filename

The output filename for additional chunks

The output filename for additional chunks string filename with [ id ] instead of [ name ] or [ id ] prefixed

Parameter

Explanation

Input type

Default

--output-filename

The output filename of the bundle

The output filename of the bundle string [name].js

Parameter

Explanation

Input type

Default

--output-jsonp-function

The name of the JSONP function used for chunk loading

The name of the JSONP function used for chunk loading string webpackJsonp

Parameter

Explanation

Input type

Default

--output-library

Expose the exports of the entry point as library

Expose the exports of the entry point as library string

Parameter

Explanation

Input type

Default

--output-library-target

The type for exposing the exports of the entry point as library

The type for exposing the exports of the entry point as library string var

Parameter

Explanation

Input type

Default

--output-path

The output path for compilation assets

The output path for compilation assets string Current directory

Parameter

Explanation

Input type

Default

--output-pathinfo

Include a comment with the request for every dependency

Include a comment with the request for every dependency boolean false

Parameter

Explanation

Input type

Default

--output-public-path

The public path for the assets

The public path for the assets string /

Parameter

Explanation

Input type

Default

--output-source-map-filename

The output filename for the SourceMap

The output filename for the SourceMap string [name].map or [outputFilename].map

Parameter

Explanation

Input type

Default

--build-delimiter

Display custom text after build output

Display custom text after build output string Default string is null. You could provide a string such as === Build done ===

Example 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 Options

This set of options allows you to better debug the application containing assets compiled with webpack

Parameter Explanation Input type Default value

Parameter

Explanation

Input type

Default value

--debug

Switch loaders to debug mode

Switch loaders to debug mode boolean false

Parameter

Explanation

Input type

Default value

--devtool

Define source map type for the bundled resources

Define source map type for the bundled resources string -

Parameter

Explanation

Input type

Default value

--progress

Print compilation progress in percentage

Print compilation progress in percentage boolean false

Parameter

Explanation

Input type

Default value

--display-error-details

Display details about errors

Display details about errors boolean false

Module Options

These options allow you to bind modules as allowed by webpack

Parameter Explanation Usage

Parameter

Explanation

Usage

--module-bind

Bind a file extension to a loader

Bind a file extension to a loader --module-bind js=babel-loader

Parameter

Explanation

Usage

--module-bind-post

Bind a file extension to a post loader

Bind a file extension to a post loader

Parameter

Explanation

Usage

--module-bind-pre

Bind a file extension to a pre loader

Bind a file extension to a pre loader

Watch Options

These options make the build watch for changes in files of the dependency graph and perform the build again.

Parameter Explanation

Parameter

Explanation

--watch, -w

Watch the filesystem for changes

Watch the filesystem for changes

Parameter

Explanation

--watch-aggregate-timeout

Timeout for gathering changes while watching

Timeout for gathering changes while watching

Parameter

Explanation

--watch-poll

The polling interval for watching (also enable polling)

The polling interval for watching (also enable polling)

Parameter

Explanation

--watch-stdin, --stdin

Exit the process when stdin is closed

Exit the process when stdin is closed

Optimize Options

These options allow you to manipulate optimizations for a production build using webpack

Parameter Explanation Plugin Used

Parameter

Explanation

Plugin Used

--optimize-max-chunks

Try to keep the chunk count below a limit

Try to keep the chunk count below a limit LimitChunkCountPlugin

Parameter

Explanation

Plugin Used

--optimize-min-chunk-size

Try to keep the chunk size above a limit

Try to keep the chunk size above a limit MinChunkSizePlugin

Parameter

Explanation

Plugin Used

--optimize-minimize

Minimize javascript and switches loaders to minimizing

Minimize javascript and switches loaders to minimizing TerserPlugin

Resolve Options

These allow you to configure the webpack resolver with aliases and extensions.

Parameter Explanation Example

Parameter

Explanation

Example

--resolve-alias

Setup a module alias for resolving

Setup a module alias for resolving --resolve-alias jquery-plugin=jquery.plugin

Parameter

Explanation

Example

--resolve-extensions

Setup extensions that should be used to resolve modules

Setup extensions that should be used to resolve modules --resolve-extensions .es6 .js .ts

Parameter

Explanation

Example

--resolve-loader-alias

Minimize javascript and switches loaders to minimizing

Minimize javascript and switches loaders to minimizing

Stats Options

These options allow webpack to display various stats and style them differently in the console output.

Parameter Explanation Type

Parameter

Explanation

Type

--color, --colors

Force colors on the console [default: enabled for TTY output only]

Force colors on the console [ default: enabled for TTY output only ] boolean

Parameter

Explanation

Type

--no-color, --no-colors

Force no colors on the console

Force no colors on the console boolean

Parameter

Explanation

Type

--display

Select display preset (verbose, detailed, normal, minimal, errors-only, none; since webpack 3.0.0)

Select display preset (verbose, detailed, normal, minimal, errors-only, none; since webpack 3.0.0) string

Parameter

Explanation

Type

--display-cached

Display also cached modules in the output

Display also cached modules in the output boolean

Parameter

Explanation

Type

--display-cached-assets

Display also cached assets in the output

Display also cached assets in the output boolean

Parameter

Explanation

Type

--display-chunks

Display chunks in the output

Display chunks in the output boolean

Parameter

Explanation

Type

--display-depth

Display distance from entry point for each module

Display distance from entry point for each module boolean

Parameter

Explanation

Type

--display-entrypoints

Display entry points in the output

Display entry points in the output boolean

Parameter

Explanation

Type

--display-error-details

Display details about errors

Display details about errors boolean

Parameter

Explanation

Type

--display-exclude

Exclude modules in the output

Exclude modules in the output boolean

Parameter

Explanation

Type

--display-max-modules

Set the maximum number of visible modules in output

Set the maximum number of visible modules in output number

Parameter

Explanation

Type

--display-modules

Display even excluded modules in the output

Display even excluded modules in the output boolean

Parameter

Explanation

Type

--display-optimization-bailout

Scope hoisting fallback trigger (since webpack 3.0.0)

Scope hoisting fallback trigger (since webpack 3.0.0) boolean

Parameter

Explanation

Type

--display-origins

Display origins of chunks in the output

Display origins of chunks in the output boolean

Parameter

Explanation

Type

--display-provided-exports

Display information about exports provided from modules

Display information about exports provided from modules boolean

Parameter

Explanation

Type

--display-reasons

Display reasons about module inclusion in the output

Display reasons about module inclusion in the output boolean

Parameter

Explanation

Type

--display-used-exports

Display information about used exports in modules (Tree Shaking)

Display information about used exports in modules (Tree Shaking) boolean

Parameter

Explanation

Type

--hide-modules

Hide info about modules

Hide info about modules boolean

Parameter

Explanation

Type

--sort-assets-by

Sort the assets list by property in asset

Sort the assets list by property in asset string

Parameter

Explanation

Type

--sort-chunks-by

Sort the chunks list by property in chunk

Sort the chunks list by property in chunk string

Parameter

Explanation

Type

--sort-modules-by

Sort the modules list by property in module

Sort the modules list by property in module string

Parameter

Explanation

Type

--verbose

Show more details

Show more details boolean

Advanced Options

Parameter Explanation Usage

Parameter

Explanation

Usage

--bail

Abort the compilation on first error

Abort the compilation on first error

Parameter

Explanation

Usage

--cache

Enable in memory caching [Enabled by default for watch]

Enable in memory caching [ Enabled by default for watch ] --cache=false

Parameter

Explanation

Usage

--define

Define any free variable, see shimming

Define any free variable, see shimming --define process.env.NODE_ENV="'development'"

Parameter

Explanation

Usage

Enables Hot Module Replacement --hot=true

Parameter

Explanation

Usage

--labeled-modules

Enables labeled modules [Uses LabeledModulesPlugin]

Enables labeled modules [ Uses LabeledModulesPlugin ]

Parameter

Explanation

Usage

--live-reload

Enables live reloading

Enables live reloading --live-reload=true

Parameter

Explanation

Usage

--plugin

Load this plugin

Load this plugin

Parameter

Explanation

Usage

--prefetch

Prefetch the particular file

Prefetch the particular file --prefetch=./files.js

Parameter

Explanation

Usage

--provide

Provide these modules as globals, see shimming

Provide these modules as globals, see shimming --provide jQuery=jquery

Parameter

Explanation

Usage

--records-input-path

Path to the records file (reading)

Path to the records file (reading)

Parameter

Explanation

Usage

--records-output-path

Path to the records file (writing)

Path to the records file (writing)

Parameter

Explanation

Usage

--records-path

Path to the records file

Path to the records file

Parameter

Explanation

Usage

--target

The targeted execution environment

The targeted execution environment --target='node'

Shortcuts

Shortcut Replaces

Shortcut

Replaces

-d

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

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

Shortcut

Replaces

-p

--mode production, see building for production

--mode production , see building for production

Profiling

The --profile option captures timing information for each step of the compilation and includes this in the output.

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

Pass CLI arguments to Node.js

To pass arguments directly to Node.js process, you can use the --node-args option. All other flags and options will be received by the webpack-cli.

For example, to increase the memory limit of Node.js process to 4 GB

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

Also, you can pass multiple options to Node.js process

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