webpack-cli
Advanced tools
The webpack-cli npm package provides a command-line interface for the webpack bundler, which allows developers to interact with webpack and its features directly from the command line. It enables tasks such as creating a new webpack project, managing configurations, running the development server, and more.
Initializing a new webpack project
This command sets up a new webpack project by generating a default configuration file. It can also install webpack and related dependencies if they are not already installed.
webpack-cli initGenerating a configuration file
Generates a webpack configuration file based on the user's preferences. It can be used to quickly scaffold a new configuration or to update an existing one.
webpack-cli generateRunning a webpack build
Executes the webpack build process, which bundles the source files according to the webpack configuration. This is typically used for production builds.
webpack-cli buildStarting a development server
Starts the webpack development server, which provides a live reloading environment for development purposes. It watches for file changes and automatically recompiles the project.
webpack-cli serveRunning webpack in watch mode
Runs webpack in watch mode, where it watches for file changes and recompiles the project as necessary. This is useful during development to see changes reflected immediately.
webpack-cli watchParcel is a web application bundler that offers a similar zero-configuration experience to webpack. It focuses on speed and simplicity, with a built-in development server and hot module replacement. Unlike webpack-cli, Parcel does not require a separate CLI package to run commands.
Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex, such as a library or application. It is known for its efficient output and tree-shaking capabilities. Rollup's CLI is included in the main package, unlike webpack which separates the CLI.
Browserify lets you require('modules') in the browser by bundling up all of your dependencies. It is an older tool compared to webpack and focuses on compatibility with Node.js modules. Browserify's CLI is also part of the main package.
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
npm install --save-dev webpack-cli
or
yarn add webpack-cli --dev
All interactions with webpack-cli are of the form
npx webpack-cli [command] [options]
If no command is specified then bundle command is used by default
To display basic commands and arguments -
npx webpack-cli --help
To display all supported commands and arguments -
npx webpack-cli --help=verbose
or
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.
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:
-c, --config <value...> Provide path to a webpack configuration file e.g. ./webpack.config.js.
--config-name <value...> Name of the configuration to use.
-m, --merge Merge two or more configurations using 'webpack-merge'.
--disable-interpret Disable interpret for loading the config file.
--env <value...> Environment passed to the configuration when it is a function.
--node-env <value> Sets process.env.NODE_ENV to the specified value.
--define-process-env-node-env <value> Sets process.env.NODE_ENV to the specified value. (Currently an alias for `--node-env`)
--analyze It invokes webpack-bundle-analyzer plugin to get bundle information.
--progress [value] Print compilation progress during build.
-j, --json [value] Prints result as JSON or store it in a file.
--fail-on-warnings Stop webpack-cli process with non-zero exit code on warnings from webpack
-d, --devtool <value> A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).
--no-devtool Negative 'devtool' option.
--entry <value...> A module that is loaded upon startup. Only the last one is exported.
--mode <value> Enable production optimizations or development hints.
--name <value> Name of the configuration. Used when loading multiple configurations.
-o, --output-path <value> The output directory as **absolute path** (required).
--stats [value] Stats options object or preset name.
--no-stats Negative 'stats' option.
-t, --target <value...> Environment to build for. Environment to build for. An array of environments to build for all of them when possible.
--no-target Negative 'target' option.
-w, --watch Enter watch mode, which rebuilds on file change.
--no-watch Negative 'watch' option.
--watch-options-stdin Stop watching when stdin stream has ended.
--no-watch-options-stdin Negative 'watch-options-stdin' option.
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.
FAQs
CLI for webpack & friends
The npm package webpack-cli receives a total of 8,059,895 weekly downloads. As such, webpack-cli popularity was classified as popular.
We found that webpack-cli demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.