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 config file.

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

Usage with config file

webpack [--config webpack.config.js]

See configuration for the options in the configuration file.

Usage without config 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 index=./src/index.js entry2=./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, 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]

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 config 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
webpack --env prod "prod"	"prod"
webpack --env.prod { prod: true }	{ prod: true }
webpack --env.prod=1 { prod: 1 }	{ prod: 1 }
webpack --env.prod=foo { prod: "foo" }	{ prod: "foo" }
webpack --env.prod --env.min { prod: true, min: true }	{ prod: true, min: true }
webpack --env.prod --env min [{ prod: true }, "min"]	[{ prod: true }, "min"]
webpack --env.prod=foo --env.prod=bar {prod: [ "foo", "bar" ]}	{prod: [ "foo", "bar" ]}

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

Config Options

Parameter	Explanation	Input type	Default
--config Path to the config file	Path to the config file	string	webpack.config.js or webpackfile.js
--config-register, -r Preload one or more modules before loading the webpack configuration	Preload one or more modules before loading the webpack configuration	array
--config-name Name of the config to use	Name of the config to use	string
--env Environment passed to the config, when it is a function	Environment passed to the config, when it is a function
--mode Mode to use, either "development" or "production"	Mode to use, either "development" or "production"	string

Output Options

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

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
--output-filename The output filename of the bundle	The output filename of the bundle	string	[ name ] .js
--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
--output-library Expose the exports of the entry point as library	Expose the exports of the entry point as library	string
--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
--output-path The output path for compilation assets	The output path for compilation assets	string	Current directory
--output-pathinfo Include a comment with the request for every dependency	Include a comment with the request for every dependency	boolean	false
--output-public-path The public path for the assets	The public path for the assets	string	/
--output-source-map-filename The output filename for the SourceMap	The output filename for the SourceMap	string	[ name ] .map or [ outputFilename ] .map
--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
--debug Switch loaders to debug mode	Switch loaders to debug mode	boolean	false
--devtool Define source map type for the bundled resources	Define source map type for the bundled resources	string	-
--progress Print compilation progress in percentage	Print compilation progress in percentage	boolean	false
--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
--module-bind Bind a file extension to a loader	Bind a file extension to a loader	--module-bind js=babel-loader
--module-bind-post Bind a file extension to a post loader	Bind a file extension to a post loader
--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
--watch, -w Watch the filesystem for changes	Watch the filesystem for changes
--watch-aggregate-timeout Timeout for gathering changes while watching	Timeout for gathering changes while watching
--watch-poll The polling interval for watching (also enable polling)	The polling interval for watching (also enable polling)
--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
--optimize-max-chunks Try to keep the chunk count below a limit	Try to keep the chunk count below a limit	LimitChunkCountPlugin
--optimize-min-chunk-size Try to keep the chunk size above a limit	Try to keep the chunk size above a limit	MinChunkSizePlugin
--optimize-minimize Minimize javascript and switches loaders to minimizing	Minimize javascript and switches loaders to minimizing	TerserPlugin & LoaderOptionsPlugin

Resolve Options

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

Parameter	Explanation	Example
--resolve-alias Setup a module alias for resolving	Setup a module alias for resolving	--resolve-alias jquery-plugin=jquery.plugin
--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
--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
--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
--no-color, --no-colors Force no colors on the console	Force no colors on the console	boolean
--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
--display-cached Display also cached modules in the output	Display also cached modules in the output	boolean
--display-cached-assets Display also cached assets in the output	Display also cached assets in the output	boolean
--display-chunks Display chunks in the output	Display chunks in the output	boolean
--display-depth Display distance from entry point for each module	Display distance from entry point for each module	boolean
--display-entrypoints Display entry points in the output	Display entry points in the output	boolean
--display-error-details Display details about errors	Display details about errors	boolean
--display-exclude Exclude modules in the output	Exclude modules in the output	boolean
--display-max-modules Set the maximum number of visible modules in output	Set the maximum number of visible modules in output	number
--display-modules Display even excluded modules in the output	Display even excluded modules in the output	boolean
--display-optimization-bailout Scope hoisting fallback trigger (since webpack 3.0.0)	Scope hoisting fallback trigger (since webpack 3.0.0)	boolean
--display-origins Display origins of chunks in the output	Display origins of chunks in the output	boolean
--display-provided-exports Display information about exports provided from modules	Display information about exports provided from modules	boolean
--display-reasons Display reasons about module inclusion in the output	Display reasons about module inclusion in the output	boolean
--display-used-exports Display information about used exports in modules (Tree Shaking)	Display information about used exports in modules (Tree Shaking)	boolean
--hide-modules Hide info about modules	Hide info about modules	boolean
--sort-assets-by Sort the assets list by property in asset	Sort the assets list by property in asset	string
--sort-chunks-by Sort the chunks list by property in chunk	Sort the chunks list by property in chunk	string
--sort-modules-by Sort the modules list by property in module	Sort the modules list by property in module	string
--verbose Show more details	Show more details	boolean

Advanced Options

Parameter	Explanation	Usage
--bail Abort the compilation on first error	Abort the compilation on first error
--cache Enable in memory caching [Enabled by default for watch]	Enable in memory caching [ Enabled by default for watch ]	--cache=false
--define Define any free variable, see shimming	Define any free variable, see shimming	--define process.env.NODE_ENV="'development'"
--hot Enables Hot Module Replacement	Enables Hot Module Replacement	--hot=true
--labeled-modules Enables labeled modules [Uses LabeledModulesPlugin]	Enables labeled modules [ Uses LabeledModulesPlugin ]
--live-reload Enables live reloading	Enables live reloading	--live-reload=true
--plugin Load this plugin	Load this plugin
--prefetch Prefetch the particular file	Prefetch the particular file	--prefetch=./files.js
--provide Provide these modules as globals, see shimming	Provide these modules as globals, see shimming	--provide jQuery=jquery
--records-input-path Path to the records file (reading)	Path to the records file (reading)
--records-output-path Path to the records file (writing)	Path to the records file (writing)
--records-path Path to the records file	Path to the records file
--target The targeted execution environment	The targeted execution environment	--target='node'

Shortcuts

Shortcut	Replaces
-d --debug --devtool cheap-module-eval-source-map --output-pathinfo	--debug --devtool cheap-module-eval-source-map --output-pathinfo
-p --optimize-minimize --define process.env.NODE_ENV="production", see building for production	--optimize-minimize --define process.env.NODE_ENV="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
⋮