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.

Commands

webpack-cli offers a variety of commands to make working with webpack easy. By default webpack ships with

Command Alias Description

Command

Alias

Description

init

c

c Initialize a new webpack configuration

Command

Alias

Description

migrate

m

m Migrate a configuration to a new version

Command

Alias

Description

loader

l

l Scaffold a loader repository

Command

Alias

Description

plugin

p

p Scaffold a plugin repository

Command

Alias

Description

info

i

i Outputs information about your system and dependencies

Command

Alias

Description

serve

s

s Run the webpack Dev Server

Flags

webpack-cli offers a variety of commands to make working with webpack easy. By default webpack ships with the following flags:

Note: These are the flags with webpack v4, starting v5 CLI also supports core flags

Flag / Alias Type Description

Flag / Alias

Type

Description

--entry

string[]

string[] The entry point(s) of your application e.g. ./src/main.js

Flag / Alias

Type

Description

--config, -c

string[]

string[] Provide path to a webpack configuration file e.g. ./webpack.config.js

Flag / Alias

Type

Description

--config-name

string[]

string[] Name of the configuration to use

Flag / Alias

Type

Description

--name

string[]

string[] Name of the configuration. Used when loading multiple configurations

Flag / Alias

Type

Description

--color

boolean

boolean Enable colors on console

Flag / Alias

Type

Description

--no-color

boolean

boolean Disables colors on console

Flag / Alias

Type

Description

--merge, -m

boolean

boolean Merge two or more configurations using webpack-merge e.g. -c ./webpack.config.js -c ./webpack.test.config.js

Flag / Alias

Type

Description

--env

string[]

string[] Environment passed to the configuration when it is a function

Flag / Alias

Type

Description

--progress

boolean

boolean Print compilation progress during build

Flag / Alias

Type

Description

--help

boolean

boolean Outputs list of supported flags and commands

Flag / Alias

Type

Description

--output-path, -o

string

string Output location of the file generated by webpack e.g. ./dist

Flag / Alias

Type

Description

--target, -t

string

string Sets the build target

Flag / Alias

Type

Description

--watch, -w

boolean

boolean Watch for file changes

Flag / Alias

Type

Description

--hot, -h

boolean

boolean Enables Hot Module Replacement

Flag / Alias

Type

Description

--no-hot

boolean

boolean Disables Hot Module Replacement

Flag / Alias

Type

Description

--devtool, -d

string

string Controls if and how source maps are generated.

Flag / Alias

Type

Description

--prefetch

string

string Prefetch this request

Flag / Alias

Type

Description

--json, -j

boolean, string

boolean, string Prints result as JSON or store it in a file

Flag / Alias

Type

Description

--mode

string

string Defines the mode to pass to webpack

Flag / Alias

Type

Description

--version, -v

boolean

boolean Get current version

Flag / Alias

Type

Description

--stats

boolean, string

boolean, string It instructs webpack on how to treat the stats

Flag / Alias

Type

Description

--no-stats

boolean

boolean Disables stats output

Flag / Alias

Type

Description

--analyze

boolean

boolean It invokes webpack-bundle-analyzer plugin to get bundle information

Negated Flags

Flag Description

Flag

Description

--no-color

Disabled any color on the console

Disabled any color on the console

Flag

Description

--no-hot

Disabled hot reloading if you have it enabled via your config

Disabled hot reloading if you have it enabled via your config

Flag

Description

--no-stats

Disables any compilation stats emitted by webpack

Disables any compilation stats emitted by webpack

Core Flags

Starting CLI v4 and webpack v5, CLI imports the entire configuration schema from webpack core to allow tuning almost every configuration option from the command line.

Here's the list of all the core flags supported by webpack v5 with CLI v4 - link

For example if you want to enable performance hints in your project you'd use this option in configuration, with core flags you can do -

webpack --performance-hints warning

Usage

With configuration file

webpack [--config webpack.config.js]

See configuration for the options in the configuration file.

Without configuration file

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

example

webpack --entry ./first.js --entry ./second.js --output-path /build

<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 for the bundled file to be saved in. It will be mapped to the configuration options output.path.

Example

If your project structure is as follows -

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

This will bundle your source code with entry as index.js, and the output bundle file will have a path of dist.

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 187 ms
webpack ./src/index.js ./src/others2.js -o dist/

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

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others2.js 1 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 198 ms

Default Configurations

CLI will look for some default configurations in the path of your project, here are the config files picked up by CLI.

If no mode is supplied via flags or config then this is the lookup order in increasing order

example - config file lookup will be in order of .webpack/webpack.config.development.js > webpack.config.development.js > webpack.config.js

'webpack.config',
'webpack.config.dev',
'webpack.config.development',
'webpack.config.prod',
'webpack.config.production',
'.webpack/webpack.config',
'.webpack/webpack.config.none',
'.webpack/webpack.config.dev',
'.webpack/webpack.config.development',
'.webpack/webpack.config.prod',
'.webpack/webpack.config.production',
'.webpack/webpackfile',

If mode is supplied, say production then config looking order will be -

.webpack/webpack.config.production.* > .webpack/webpack.config.prod.* > webpack.config.production.* > webpack.config.prod.* > webpack.config.*

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 commands and flags available on the cli

webpack --help

Show help for a single command or flag

webpack --help <command>
webpack --help --<flag>

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 one of the default.

webpack --config example.config.js

Print result of webpack as a JSON

webpack --json

If you want to store stats as json instead of printing it, you can use -

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

The --env argument accepts multiple values:

Invocation Resulting environment

Invocation

Resulting environment

webpack --env prod

{ prod: true }

{ prod: true }

Invocation

Resulting environment

webpack --env prod --env min

{ prod: true, min: true }

{ prod: true, min: true }

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 Default Configs

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'

Analyzing Bundle

You can also use webpack-bundle-analyzer to analyze your output bundles emitted by webpack. You can use --analyze flag to invoke it via CLI.

webpack --analyze

Make sure you have webpack-bundle-analyzer installed in your project else CLI will prompt you to install it.

Pass CLI arguments to Node.js

To pass arguments directly to Node.js process, you can use the NODE_OPTIONS option.

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

NODE_OPTIONS="--max-old-space-size=4096" webpack

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

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