wpk: a friendly, intuitive, intelligent, and unofficial CLI for webpack

a friendly, intuitive, intelligent, and unofficial CLI for webpack

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 initialise a new config build one or more configs in parallel add a plugin, loader, DLL, alias, extension, and more to a config set a property on a config get the source or evaluated value of property on a config manage the global wpk user configuration serve up your app with webpack-dev-server analyse your bundles with webpack-bundle-analyzer wpk init wpk init [config]

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

wpk: a friendly, intuitive, intelligent, and unofficial CLI for webpack

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 --out <config> --env <env> --preset <preset> -e, --extends [filename] -f, --no-install -n, --no-help -x, --dry-run -y, --yes -a, --advanced -e, --evaluated -o, --overwrite -q, --quiet wpk build wpk build [config]

View example: building a multi-compiler config

wpk: a friendly, intuitive, intelligent, and unofficial CLI for webpack

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] --sort [what] 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 wpk set

wpk set <name> <value>


Set a webpack configuration property.

Arguments name 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>


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 --config <files> --env <env> -s, --source wpk opts

wpk opts <operation>


Manage your saved wpk options.

Arguments operation ...args Operations open location set <name> <value> get <name> list presets delete preset <name> wpk alias

wpk alias <alias> <command>


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] [bundleDir] Flags

All 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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

本文标题:wpk: a friendly, intuitive, intelligent, and unofficial CLI for webpack

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(23)