| 1 | <div align="center">
|
|---|
| 2 | <a href="https://github.com/webpack/webpack-cli">
|
|---|
| 3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
|---|
| 4 | </a>
|
|---|
| 5 | </div>
|
|---|
| 6 |
|
|---|
| 7 | # webpack CLI
|
|---|
| 8 |
|
|---|
| 9 | The official CLI of webpack
|
|---|
| 10 |
|
|---|
| 11 | ## About
|
|---|
| 12 |
|
|---|
| 13 | 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.
|
|---|
| 14 |
|
|---|
| 15 | ## How to install
|
|---|
| 16 |
|
|---|
| 17 | When you have followed the [Getting Started](https://webpack.js.org/guides/getting-started/) guide of webpack then webpack CLI is already installed!
|
|---|
| 18 |
|
|---|
| 19 | Otherwise
|
|---|
| 20 |
|
|---|
| 21 | ```bash
|
|---|
| 22 | npm install --save-dev webpack-cli
|
|---|
| 23 | ```
|
|---|
| 24 |
|
|---|
| 25 | or
|
|---|
| 26 |
|
|---|
| 27 | ```bash
|
|---|
| 28 | yarn add webpack-cli --dev
|
|---|
| 29 | ```
|
|---|
| 30 |
|
|---|
| 31 | ## Supported arguments and commands
|
|---|
| 32 |
|
|---|
| 33 | ### Usage
|
|---|
| 34 |
|
|---|
| 35 | All interactions with webpack-cli are of the form
|
|---|
| 36 |
|
|---|
| 37 | ```bash
|
|---|
| 38 | npx webpack-cli [command] [options]
|
|---|
| 39 | ```
|
|---|
| 40 |
|
|---|
| 41 | If no command is specified then `bundle` command is used by default
|
|---|
| 42 |
|
|---|
| 43 | ### Help Usage
|
|---|
| 44 |
|
|---|
| 45 | To display basic commands and arguments -
|
|---|
| 46 |
|
|---|
| 47 | ```bash
|
|---|
| 48 | npx webpack-cli --help
|
|---|
| 49 | ```
|
|---|
| 50 |
|
|---|
| 51 | To display all supported commands and arguments -
|
|---|
| 52 |
|
|---|
| 53 | ```bash
|
|---|
| 54 | npx webpack-cli --help=verbose
|
|---|
| 55 | ```
|
|---|
| 56 |
|
|---|
| 57 | or
|
|---|
| 58 |
|
|---|
| 59 | ```bash
|
|---|
| 60 | npx webpack-cli --help verbose
|
|---|
| 61 | ```
|
|---|
| 62 |
|
|---|
| 63 | ### Available Commands
|
|---|
| 64 |
|
|---|
| 65 | ```
|
|---|
| 66 | build|bundle|b [entries...] [options] Run webpack (default command, can be omitted).
|
|---|
| 67 | configtest|t [config-path] Validate a webpack configuration.
|
|---|
| 68 | help|h [command] [option] Display help for commands and options.
|
|---|
| 69 | info|i [options] Outputs information about your system.
|
|---|
| 70 | init|create|new|c|n [generation-path] [options] Initialize a new webpack project.
|
|---|
| 71 | loader|l [output-path] [options] Scaffold a loader.
|
|---|
| 72 | plugin|p [output-path] [options] Scaffold a plugin.
|
|---|
| 73 | serve|server|s [entries...] [options] Run the webpack dev server.
|
|---|
| 74 | version|v [commands...] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
|
|---|
| 75 | watch|w [entries...] [options] Run webpack and watch for files changes.
|
|---|
| 76 | ```
|
|---|
| 77 |
|
|---|
| 78 | ### Available Options
|
|---|
| 79 |
|
|---|
| 80 | ```
|
|---|
| 81 | Options:
|
|---|
| 82 | -c, --config <value...> Provide path to a webpack configuration file e.g. ./webpack.config.js.
|
|---|
| 83 | --config-name <value...> Name of the configuration to use.
|
|---|
| 84 | -m, --merge Merge two or more configurations using 'webpack-merge'.
|
|---|
| 85 | --disable-interpret Disable interpret for loading the config file.
|
|---|
| 86 | --env <value...> Environment passed to the configuration when it is a function.
|
|---|
| 87 | --node-env <value> Sets process.env.NODE_ENV to the specified value.
|
|---|
| 88 | --define-process-env-node-env <value> Sets process.env.NODE_ENV to the specified value. (Currently an alias for `--node-env`)
|
|---|
| 89 | --analyze It invokes webpack-bundle-analyzer plugin to get bundle information.
|
|---|
| 90 | --progress [value] Print compilation progress during build.
|
|---|
| 91 | -j, --json [value] Prints result as JSON or store it in a file.
|
|---|
| 92 | --fail-on-warnings Stop webpack-cli process with non-zero exit code on warnings from webpack
|
|---|
| 93 | -d, --devtool <value> A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).
|
|---|
| 94 | --no-devtool Negative 'devtool' option.
|
|---|
| 95 | --entry <value...> A module that is loaded upon startup. Only the last one is exported.
|
|---|
| 96 | --mode <value> Enable production optimizations or development hints.
|
|---|
| 97 | --name <value> Name of the configuration. Used when loading multiple configurations.
|
|---|
| 98 | -o, --output-path <value> The output directory as **absolute path** (required).
|
|---|
| 99 | --stats [value] Stats options object or preset name.
|
|---|
| 100 | --no-stats Negative 'stats' option.
|
|---|
| 101 | -t, --target <value...> Environment to build for. Environment to build for. An array of environments to build for all of them when possible.
|
|---|
| 102 | --no-target Negative 'target' option.
|
|---|
| 103 | -w, --watch Enter watch mode, which rebuilds on file change.
|
|---|
| 104 | --no-watch Negative 'watch' option.
|
|---|
| 105 | --watch-options-stdin Stop watching when stdin stream has ended.
|
|---|
| 106 | --no-watch-options-stdin Negative 'watch-options-stdin' option.
|
|---|
| 107 |
|
|---|
| 108 | Global options:
|
|---|
| 109 | --color Enable colors on console.
|
|---|
| 110 | --no-color Disable colors on console.
|
|---|
| 111 | -v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
|
|---|
| 112 | -h, --help [verbose] Display help for commands and options.
|
|---|
| 113 | ```
|
|---|
| 114 |
|
|---|
| 115 | Checkout [`OPTIONS.md`](https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md) to see list of all available options.
|
|---|
| 116 |
|
|---|
| 117 | ## Exit codes and their meanings
|
|---|
| 118 |
|
|---|
| 119 | | Exit Code | Description |
|
|---|
| 120 | | --------- | -------------------------------------------------- |
|
|---|
| 121 | | `0` | Success |
|
|---|
| 122 | | `1` | Errors from webpack |
|
|---|
| 123 | | `2` | Configuration/options problem or an internal error |
|
|---|
| 124 |
|
|---|
| 125 | ## CLI Environment Variables
|
|---|
| 126 |
|
|---|
| 127 | | Environment Variable | Description |
|
|---|
| 128 | | ----------------------------------- | ------------------------------------------------------------------- |
|
|---|
| 129 | | `WEBPACK_CLI_SKIP_IMPORT_LOCAL` | when `true` it will skip using the local instance of `webpack-cli`. |
|
|---|
| 130 | | `WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG` | when `true` it will force load the ESM config. |
|
|---|
| 131 | | `WEBPACK_PACKAGE` | Use a custom webpack version in CLI. |
|
|---|
| 132 | | `WEBPACK_DEV_SERVER_PACKAGE` | Use a custom webpack-dev-server version in CLI. |
|
|---|
| 133 | | `WEBPACK_CLI_HELP_WIDTH` | Use custom width for help output. |
|
|---|
| 134 |
|
|---|
| 135 | ## Configuration Environment Variables
|
|---|
| 136 |
|
|---|
| 137 | You can use the following environment variables inside your webpack configuration:
|
|---|
| 138 |
|
|---|
| 139 | | Environment Variable | Description |
|
|---|
| 140 | | -------------------- | -------------------------------------------- |
|
|---|
| 141 | | `WEBPACK_SERVE` | `true` if `serve\|s` is being used. |
|
|---|
| 142 | | `WEBPACK_BUILD` | `true` if `build\|bundle\|b` is being used. |
|
|---|
| 143 | | `WEBPACK_WATCH` | `true` if `--watch\|watch\|w` is being used. |
|
|---|
| 144 |
|
|---|
| 145 | Checkout [webpack.js.org](https://webpack.js.org/api/cli/) for more detailed documentation of `webpack-cli`.
|
|---|
