a friendly, intuitive & intelligent CLI for webpack
Branch: master
Clone or download
Latest commit 88ed8c8 Feb 5, 2019

README.md

wpk

a friendly, intuitive & intelligent CLI for webpack

npm version

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 6+
  • webpack v4+

Note: wpk is built for webpack 4+. YMMV with lower versions. Please report issues for older versions as do want to support them as best we can.

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]

View example: initialising a new config with custom plugins and loaders

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]

View example: building a multi-compiler 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.

Arguments

  • 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

Flags

  • --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 packages

Available definitions

wpk 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

wpk set <name> <value>

Description

Set a webpack configuration property.

Arguments

  • name config property name (dot-path)
  • value config property value

Flags

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

wpk get <name>

Description

Display the value of a property in the config.

It is possible to get the source value or the evaluated value of a property.

Arguments

  • name config property name (dot-path)

Flags

  • --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 property

wpk opts

wpk opts <operation>

Description

Manage your saved wpk options.

Arguments

  • operation see below
  • ...args (optional) extra operation arguments

Operations

  • open open the config file in default editor
  • location print the location of the config file
  • set <name> <value> set the value of a config property
  • get <name> get the value of a config property
  • list presets list all saved user presets
  • delete preset <name> delete a saved user preset

wpk alias

wpk alias <alias> <command>

Description

Create an alias of a wpk command.

Arguments

  • alias the name of the alias (e.g. build-prod)
  • command the command to alias (should begin with wpk)

wpk serve

wpk serve [config]

Description

Serve up your application using webpack-dev-server.

Arguments

  • [config] path to the config file to serve

Flags

All the webpack-dev-server flags.


wpk analyse

wpk analyse|analyze [bundleStatsFile] [bundleDir]

Description

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.

Arguments

  • [bundleStatsFile] the stats JSON file to analyse
  • [bundleDir] the output directory of a build

Flags

All the webpack-bundle-analyzer flags.



wpk-def.json

Please see the wpk-def.json documentation.

Plugins

Please see the Plugins documentation.

API

Please see the API documentation.

Development

Please see the Development documentation.

Contributing

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.

License

MIT © Sam Gluck