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

By default webpack ships with the following 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 --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, string	boolean, string	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 --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 --analyze boolean	boolean	It invokes webpack-bundle-analyzer plugin to get bundle information

Negated Flags

Flag	Description
Flag Description --no-color Disables any color on the console	Disables any color on the console
Flag Description --no-hot Disables hot reloading if you have it enabled via your config	Disables 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
Flag Description --no-watch Do not watch for file changes	Do not watch for file changes
Flag Description --no-devtool Do not generate source maps	Do not generate source maps

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 -

npx webpack --performance-hints warning

Usage

With configuration file

npx webpack [--config webpack.config.js]

See configuration for the options in the configuration file.

Without configuration file

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

example

npx 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

npx 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

npx 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.

This is the lookup priority in increasing order

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

'webpack.config',
'.webpack/webpack.config',
'.webpack/webpackfile',

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

npx webpack --help

Show help for a single command or flag

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

Show version of installed packages and sub-packages

To inspect the version of webpack and webpack-cli you are using just run command:

npx webpack --version

This will output the following result:

webpack-cli 4.2.0
webpack 5.4.0

To inspect the version of any webpack-cli sub-package (like @webpack-cli/init) just run command similar to the following:

npx webpack init --version

This will output the following result:

@webpack-cli/init 1.0.3
webpack-cli 4.2.0
webpack 5.4.0

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.

npx webpack --config example.config.js

Print result of webpack as a JSON

npx webpack --json

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

npx 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.

See the stats data api to read more about the stats generated here.

Environment Options

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

npx webpack --env production    # sets env.production == true

The --env argument accepts multiple values:

Invocation	Resulting environment
Invocation Resulting environment npx webpack --env prod { prod: true }	{ prod: true }
Invocation Resulting environment npx webpack --env prod --env min { prod: true, min: true }	{ prod: true, min: true }
Invocation Resulting environment npx webpack --env platform=app --env production { platform: "app", production: true }	{ platform: "app", production: true }
Invocation Resulting environment npx webpack --env app.platform="staging" --env app.name="test" { app: { platform: "staging", name: "test" }	{ app: { platform: "staging", name: "test" }

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.

npx webpack --analyze

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

Progress

To check the progress of any webpack compilation you can use the --progress flag.

npx webpack --progress

To collect profile data for progress steps you can pass profile as value to --progress flag.

npx webpack --progress=profile

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

Exit codes and their meanings

Exit Code	Description
Exit Code Description 0 Success	Success
Exit Code Description 1 Errors from webpack	Errors from webpack
Exit Code Description 2 Configuration/options problem or an internal error	Configuration/options problem or an internal error