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

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.

Hash: 07a1c2d056e28ff1cab2
Version: webpack 4.44.2
Time: 174ms
Built at: 10/10/2020 11:37:09 AM
  Asset       Size  Chunks             Chunk Names
main.js  952 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 30 bytes {0} [built]
[1] ./src/others.js 0 bytes {0} [built]

webpack ./src/index.js ./src/others2.js -o dist/

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

Hash: fad168056241c7181505
Version: webpack 4.44.2
Time: 175ms
Built at: 10/10/2020 11:38:28 AM
  Asset        Size  Chunks             Chunk Names
main.js  1010 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] multi ./src/index.js ./src/others2.js 40 bytes {0} [built]
[1] ./src/index.js 30 bytes {0} [built]
[2] ./src/others.js 0 bytes {0} [built]
[3] ./src/others2.js 0 bytes {0} [built]

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
webpack -h

Show help for a single command or flag

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

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'

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

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

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 --hot Enables Hot Module Replacement	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'

Negated Flags

Shortcut	Replaces
Shortcut Replaces --no-color Disabled any color on the console	Disabled any color on the console
Shortcut Replaces --no-hot Disabled hot reloading if you have it enabled via your config	Disabled hot reloading if you have it enabled via your config
Shortcut Replaces --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 alow tuning almost every property from the command line.

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

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.

Aliases

We've set certain aliases for commonly used flags to make it convenient to work with webpack.

Shortcut	Replaces
Shortcut Replaces -c --config	--config
Shortcut Replaces -m --merge	--merge
Shortcut Replaces -o --output-path	--output-path
Shortcut Replaces -t --target	--target
Shortcut Replaces -w --watch	--watch
Shortcut Replaces -h --hot	--hot
Shortcut Replaces -d --devtool	--devtool
Shortcut Replaces -j --json	--json
Shortcut Replaces -v --version	--version
Shortcut Replaces -v --version	--version

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