The official CLI of webpack
webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project. As of webpack v4, webpack is not expecting a configuration file, but often developers want to create a more custom webpack configuration based on their use-cases and needs. webpack CLI addresses these needs by providing a set of tools to improve the setup of custom webpack configuration.
When you have followed the Getting Started guide of webpack then webpack CLI is already installed!
Otherwise
bash
npm install --save-dev webpack-cli
or
bash
yarn add webpack-cli --dev
All interactions with webpack-cli are of the form
bash
npx webpack-cli [command] [options]
If no command is specified then bundle
command is used by default
To display basic commands and arguments -
bash
npx webpack-cli --help
To display all supported commands and arguments -
bash
npx webpack-cli --help=verbose
or
bash
npx webpack-cli --help verbose
build|bundle|b [entries...] [options] Run webpack (default command, can be omitted).
configtest|t [config-path] Validate a webpack configuration.
help|h [command] [option] Display help for commands and options.
info|i [options] Outputs information about your system.
init|create|new|c|n [generation-path] [options] Initialize a new webpack project.
loader|l [output-path] [options] Scaffold a loader.
migrate|m <config-path> [new-config-path] Migrate a configuration to a new version.
plugin|p [output-path] [options] Scaffold a plugin.
serve|server|s [entries...] [options] Run the webpack dev server.
version|v [commands...] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
watch|w [entries...] [options] Run webpack and watch for files changes.
```
Options:
--analyze It invokes webpack-bundle-analyzer plugin to get bundle information
-c, --config
Global options: --color Enable colors on console. --no-color Disable colors on console. -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands. -h, --help [verbose] Display help for commands and options. ```
Checkout OPTIONS.md
to see list of all available options.
| Exit Code | Description |
| --------- | -------------------------------------------------- |
| 0
| Success |
| 1
| Errors from webpack |
| 2
| Configuration/options problem or an internal error |
| Environment Variable | Description |
| ----------------------------------- | ------------------------------------------------------------------- |
| WEBPACK_CLI_SKIP_IMPORT_LOCAL
| when true
it will skip using the local instance of webpack-cli
. |
| WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG
| when true
it will force load the ESM config. |
| WEBPACK_PACKAGE
| Use a custom webpack version in CLI. |
| WEBPACK_DEV_SERVER_PACKAGE
| Use a custom webpack-dev-server version in CLI. |
| WEBPACK_CLI_HELP_WIDTH
| Use custom width for help output. |
You can use the following environment variables inside your webpack configuration:
| Environment Variable | Description |
| -------------------- | -------------------------------------------- |
| WEBPACK_SERVE
| true
if serve\|s
is being used. |
| WEBPACK_BUILD
| true
if build\|bundle\|b
is being used. |
| WEBPACK_WATCH
| true
if --watch\|watch\|w
is being used. |
Checkout webpack.js.org for more detailed documentation of webpack-cli
.