a friendly, intuitive & intelligent CLI for webpack
a friendly, intuitive & intelligent CLI for webpack
wpk-def.json
plugin/loader definitionsnpm install -g @wpk-cli/cli
Name | Description |
---|---|
init | initialise a new config |
build | build one or more configs in parallel |
add | add a plugin, loader, DLL, alias, extension, and more to a config |
set | set a property on a config |
get | get the source or evaluated value of property on a config |
opts | manage the global wpk user configuration |
serve | serve up your app with webpack-dev-server |
analyse | analyse your bundles with webpack-bundle-analyzer |
wpk init [config]
Create a new webpack configuration.
Takes you step-by-step through the creation of a webpack configuration, including environments, context, entries, loaders, plugins, and more.
Each step of the creation process displays documentation pertaining to the
current part of the configuration that is being created, with the ability
to see more information about a specific config property by pressing
CTRL+O
.
config
(optional) filename/path of new webpack config--help
get usage for this command--out <config>
filename/path of new webpack config--env <env>
set process.env.NODE_ENV (used when printing evaluated config)--preset <preset>
generate config using previously saved answers preset-e, --extends [filename]
config filename/path to extend (uses webpack-merge in resulting config)-f, --no-install
do not install (or prompt to install) external dependencies-n, --no-help
do not display live help text & documentation-x, --dry-run
do not make any changes to the filesystem (prints config to stdout)-y, --yes
accept default answers of all prompts-a, --advanced
configure advanced webpack configuration properties-e, --evaluated
display evaluated config instead of config object literal-o, --overwrite
overwrite an existing config file-q, --quiet
only log errorswpk build [config]
Build one or more webpack configurations.
Worker processes are used when building two or more configurations.
Watch application files and webpack configs with --watch
.
Interactive mode is enabled with --interactive
. This allows toggling the display of errors/warnings/build stats in
real time, scrolling paged output. When building multiple configs the output for each is displayed within their own
"window", which are navigable using the left & right arrow keys. Instructions for using the interactive mode are
displayed when the mode is enabled (and can be toggled/turned off within the interface).
Note: single config builds are not run using a worker. You can force a worker to be used with --force-worker
.
[config]
path to the config to build--help
get usage for this command--config <files>
location of webpack config to build (use multiple to build multiple configs)
--cwd <path>
path from where to resolve configs--concurrency <num>
set the number of concurrent parallel builds (defaults to number of available CPU cores)--watch-aggregate-timeout <timeout>
timeout for gathering changes while watching--watch-poll <timeout>
the polling interval for watching (also enable polling)--json
print build stats as JSON to stdout--no-stats-cache
do not perform underlying build stats caching--no-watch-config
do not watch and rebuild on changes to webpack configs (when used with --watch)--no-log-intercept
do not intercept and collect builder log output (worker logs will be lost)--stdin, --watch-stdin
exit the process when stdin is closed--no-progress
do not display animated progress during build--renderer <name>
Select a renderer for the output stats: "webpack", "simple" (or custom: give package name)--env [value]
define variables to pass to a function config, e.g. --env.prod becomes { env: 'prod' }--config-name <name>
name of one config to build in a multi-compiler config file-m, --multi-compiler
enables each config in a multi-compiler to be run in parallel (at a small performance cost)-w, --watch
rebuild on changes to app files and webpack configs-f, --force-worker
force single config builds to run in a worker-n, --no-worker
do not use workers at all (forces concurrency to 1)-q, --quiet
only log errors-i, --interactive
enable interactive modewebpack-cli
flags
The build command comes with two renderers built-in: "webpack" and "simple". The default renderer used is "webpack".
Options for the available renderers are listed below.
The renderer that webpack-cli uses.
Options for the webpack renderer are all of the normal Stats options available with the official webpack-cli.
The simple renderer displays all chunks, modules, and assets in their own truncated lists.
Options for the simple renderer:
-v, --verbose [what]
show full webpack output for all stats or a specific stat type, e.g. 'assets' or 'chunks'--sort [what]
sort stats objects by a property, e.g. 'size', 'initial' (default='size'), with 'simple' rendererwpk add <type> <name> [value] [config]
Add a component to the configuration.
Optionally interactively configure plugins and loaders that have a wpk-def.json
file.
wpk
comes with some definitions built-in for native plugins & loaders.
You can interactively add DLLs, entries, extensions, and other webpack "things" using this command.
type
one of alias|cache-group|plugin|loader|dll|entry|extension
name
the name of the component[value]
the value of whatever is being added, e.g. when adding an alias[config]
the config to add the component to--help
get usage for this command--config <path>
location of webpack config file---env <env>
enable component only when NODE_ENV=<environment>
-o, --no-configure
do not configure interactively-m, --minimizer-plugin
add a plugin as an optimization minimizer-r, --resolve-plugin
add a plugin as a resolve plugin-y, --yes
accept all default answers-a, --advanced
enable advanced prompt questions-d, --dev
shortcut for --env=development-P, --prod
shortcut for --env=production-g, --global
install any package(s) globally-p, --path-sensitive
set value as path.resolve(__dirname, <value>)
-d, --dry-run
do not make any changes to the filesystem-n, --no-install
skip installing any required packageswpk has definitions for the following plugins & loaders built-in.
plugins
compression-webpack-plugin
copy-webpack-plugin
define-plugin
environment-plugin
extract-text-webpack-plugin
hot-module-replacement-plugin
mini-css-extract-plugin
offline-plugin
loaders
babel-loader
wpk set <name> <value>
Set a webpack configuration property.
name
config property name (dot-path)value
config property value--help
get usage for this command--config <path>
location of webpack config file--env <env>
environment value should be active in-p, --path-sensitive
set value as path.resolve(__dirname, <value>)
wpk get <name>
Display the value of a property in the config.
It is possible to get the source value or the evaluated value of a property.
name
config property name (dot-path)--help
get usage for this command--config <files>
location of webpack config--env <env>
get value for config in given environment-s, --source
get the source value of the config propertywpk opts <operation>
Manage your saved wpk
options.
operation
see below...args
(optional) extra operation argumentsopen
open the config file in default editorlocation
print the location of the config fileset <name> <value>
set the value of a config propertyget <name>
get the value of a config propertylist presets
list all saved user presetsdelete preset <name>
delete a saved user presetwpk alias <alias> <command>
Create an alias of a wpk command.
alias
the name of the alias (e.g. build-prod
)command
the command to alias (should begin with wpk
)wpk serve [config]
Serve up your application using webpack-dev-server.
[config]
path to the config file to serveAll the webpack-dev-server flags.
wpk analyse|analyze [bundleStatsFile] [bundleDir]
Analyse your webpack bundles with webpack-bundle-analyzer.
With wpk analyse
wpk will automatically find the latest builds that have been run with wpk build
.
[bundleStatsFile]
the stats JSON file to analyse[bundleDir]
the output directory of a buildAll the webpack-bundle-analyzer flags.
Please see the wpk-def.json documentation.
Please see the Plugins documentation.
Please see the API documentation.
Please see the Development documentation.
Issues, bugs, and PRs are welcome.
If you are looking to contribute, that's awesome, please take a look at the Issues tracker.
Please provide adequate descriptions and/or instructions to reproduce for bugs and issues.
MIT © Sam Gluck