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 | migrate|m <config-path> [new-config-path] Migrate a configuration to a new version.
|
73 | plugin|p [output-path] [options] Scaffold a plugin.
|
74 | serve|server|s [entries...] [options] Run the webpack dev server.
|
75 | version|v [commands...] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
|
76 | watch|w [entries...] [options] Run webpack and watch for files changes.
|
77 | ```
|
78 |
|
79 | ### webpack 4
|
80 |
|
81 | ```
|
82 | Options:
|
83 | --analyze It invokes webpack-bundle-analyzer plugin to get bundle information
|
84 | -c, --config <value...> Provide path to a webpack configuration file e.g. ./webpack.config.js.
|
85 | --config-name <value...> Name of the configuration to use.
|
86 | -m, --merge Merge two or more configurations using 'webpack-merge'.
|
87 | --env <value...> Environment passed to the configuration when it is a function.
|
88 | --node-env <value> Sets process.env.NODE_ENV to the specified value.
|
89 | --progress [value] Print compilation progress during build.
|
90 | -j, --json [value] Prints result as JSON or store it in a file.
|
91 | -d, --devtool <value> Determine source maps to use.
|
92 | --no-devtool Do not generate source maps.
|
93 | --entry <value...> The entry point(s) of your application e.g. ./src/main.js.
|
94 | -h, --hot [value] Enables Hot Module Replacement
|
95 | --no-hot Disables Hot Module Replacement
|
96 | --mode <value> Defines the mode to pass to webpack.
|
97 | --name <value> Name of the configuration. Used when loading multiple configurations.
|
98 | -o, --output-path <value> Output location of the file generated by webpack e.g. ./dist/.
|
99 | --prefetch <value> Prefetch this request
|
100 | --stats [value] It instructs webpack on how to treat the stats e.g. verbose.
|
101 | --no-stats Disable stats output.
|
102 | -t, --target <value...> Sets the build target e.g. node.
|
103 | -w, --watch Watch for files changes.
|
104 | --no-watch Do not watch for file changes.
|
105 | --watch-options-stdin Stop watching when stdin stream has ended.
|
106 | --no-watch-options-stdin Do not stop watching when stdin stream has ended.
|
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 | ### webpack 5
|
116 |
|
117 | Checkout [`OPTIONS.md`](https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md) to see list of all available options.
|
118 |
|
119 | ## Exit codes and their meanings
|
120 |
|
121 | | Exit Code | Description |
|
122 | | --------- | -------------------------------------------------- |
|
123 | | `0` | Success |
|
124 | | `1` | Errors from webpack |
|
125 | | `2` | Configuration/options problem or an internal error |
|
126 |
|
127 | ## CLI Environment Variables
|
128 |
|
129 | | Environment Variable | Description |
|
130 | | ----------------------------------- | ------------------------------------------------------------------- |
|
131 | | `WEBPACK_CLI_SKIP_IMPORT_LOCAL` | when `true` it will skip using the local instance of `webpack-cli`. |
|
132 | | `WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG` | when `true` it will force load the ESM config. |
|
133 | | `WEBPACK_PACKAGE` | Use a custom webpack version in CLI. |
|
134 | | `WEBPACK_CLI_HELP_WIDTH` | Use custom width for help output. |
|
135 |
|
136 | ## Configuration Environment Variables
|
137 |
|
138 | You can use the following environment variables inside your webpack configuration:
|
139 |
|
140 | | Environment Variable | Description |
|
141 | | -------------------- | -------------------------------------------- |
|
142 | | `WEBPACK_SERVE` | `true` if `serve\|s` is being used. |
|
143 | | `WEBPACK_BUILD` | `true` if `build\|bundle\|b` is being used. |
|
144 | | `WEBPACK_WATCH` | `true` if `--watch\|watch\|w` is being used. |
|
145 |
|
146 | Checkout [webpack.js.org](https://webpack.js.org/api/cli/) for more detailed documentation of `webpack-cli`.
|