@wpk-cli/builder NPM

Features

friendly, intuitive, & intelligent interface
easily create complex webpack configs in minutes
commands display contextual live hints, docs, & links
create configs that extend other configs
watch & build multiple configs in parallel
build multi-compiler configs in parallel
parallel builds use worker processes
displays all build worker process logs
beautiful build terminal interface
interactive build mode (paged output, stats toggling, & more)
rebuild on changes to configs (as well as app files)
support for custom build stats renderers
caches latest build stats for each config
quickly analyse builds with webpack-bundle-analyser
add plugins & loaders from command line
interactive configuration of plugins & loaders
get & set config properties on command line
intelligent & interactive creation of DLL configs
save whole prompt sessions as command presets
highly configurable with global user configuration
serve up your app with webpack-dev-server
support for command aliasing (create custom commands)
introduces wpk-def.json plugin/loader definitions
config parser & transformer built ground up for webpack
can use local or global webpack (local by default)
extensible; support for 3rd party commands
modular; API-driven codebase
universal; works in the browser (coming soon!)
user-friendly; great developer experience
modern; built for webpack v4+

Glossary

Requirements

Node >=8
webpack >=4

Install

npm install -g @wpk-cli/cli

Commands

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

wpk init [config]

Description

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.

Arguments

config (optional) filename/path of new webpack config

Flags

--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 errors

wpk build

wpk build [config]

Description

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.

Arguments

[config] path to the config to build

Flags

--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 mode
...and all webpack-cli flags

Renderers

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.

"webpack" renderer

The renderer that webpack-cli uses.

Options for the webpack renderer are all of the normal Stats options available with the official webpack-cli.

wpk "simple" renderer

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' renderer

wpk add

wpk add <type> <name> [value] [config]

Description

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.