A superior CLI experience for webpack. Lightweight, modular, and opinionated.
For users coming from
webpack-cli, please read about
the differences between this module and
This module requires a minimum of Node v6.14.0 and Webpack v4.0.0.
webpack-cli cannot be installed at the same time, as
they both export a bin file named
webpack. When trying
npm uninstall webpack-cli first.
webpack-command has many advantages over other CLI experiences for
- Extendable Webpack Configurations. A configuration file can extend the properties and collections from base configurations, and are filtered intelligently.
- Custom Reporters 🤯
- A beautiful default user experience with output driven by
- Support for
webpackconfiguration in any language or compiler that provides a
- Support for
- Validation of commands, entries, and flags before further execution
- Extensible third-party commands. Include only what you need!
- A full test suite with 220 tests and 95% coverage (so close to 100% 💪)
93%24% smaller package cost versus
webpack-cli(it used to be 93%, they got wise after webpack-command was released)
- Highly focused on the User Experience and detail
And last but not least, Did-You-Mean suggestions for flags:
To begin, you'll need to install
$ npm install webpack-command --save-dev
The primary binary for webpack-command is
wp (because who doesn't like to save
keystrokes!?) Although, you may also use the
webpack binary as per usual if
your setup installs this module after webpack, and the two don't conflict.
As a convenience for alternative package managers, the
is also installed with this package.
Extendable Webpack Configurations
This module supports extending webpack configuration files with
extends functionality. This feature allows users to create a "base" config and
in essence, "inherit" from that base config in a separate config. A bare-bones
// base.config.jsmoduleexports =name: 'base'mode: 'development'plugins: ...
// webpack.config.jsmoduleexports =extends: pathname: 'dev'
The resulting configuration object would resemble:
name: 'dev'mode: 'development'plugins: ...
webpack-command allows users to extend the
webpack CLI experience by
including a few helpful built-in commands, and providing a means to develop
For more documentation on flags, please see the
While this project aims for parity with
webpack-cli in nearly all aspects,
there are some notable differences. Included in those differences is the note
that this module includes the bare minimum of commands to provide a
CLI. Commands like
update are relegated to separate,
That said, the following differences should also be noted:
--env Flag is Nuked
Environment Variables have
been around a very, very long time.
webpack-cli chose to introduce a feature
that let users specify environment variables via a flag. This module does not
include that feature. Instead, users should make use of environment variables
the traditional, standard way:
$ NEAT_VAR=woo webpack ...
And access the values via
process.env. Alternatively, if users are in need of
cross-platform environment variables, a tool such as
cross-env should be leveraged.
Certain flags passed in
webpack-cli allow for a key-value pair for
pairing an alias with the alias value. e.g.
--entry name=file. This module
adopts a CLI-standard approach by using the syntax
--flag.key value instead,
and does not support the
Specifying entries by either flag (
--flag) or input (
webpack <file>) require
that the file or directory specified exist.
Entries passed with a comma-separated value
--entry file,file2 are deprecated
and should be migrated to use the CLI-standard
--entry file --entry file2
Entries passed by flag in
--entry name=file should be
migrated to use the
--entry.name file syntax.
Resolve aliases passed by flag in
--resolve-alias alias=value should be migrated to use the
Resolve Loader Alias
Resolve aliases passed by flag in
--resolve-loader-alias alias=value should be migrated to use the
--resolve-loader-alias.alias value syntax.
webpack-command supports custom, user-defined reporters which allow users
full control over how build data is presented. By default, it ships with two
Displays the default
webpack output, the same you'll see
The default reporter and displays beautiful output using the same code
Building your own reporter is as easy as inheriting from the
Configuration Languages and Compilers
webpack-command allows users to leverage any language that provides a require
hook. To leverage this feature, define your configs as such for the following
- Babel ES6 Modules:
webpack.config.es6, and use
webpack.config.flow, and use
webpack.config.ts, and use
Other hooks may work for additional language or compiler support.
Note: Compilers are not part of, nor built-into this module. To use a specific compiler, you must install it first.
Any entry files specified will overwrite entries in a
as of this Pull Request in
Please take a moment to read our contributing guidelines if you haven't yet done so.