• This repository has been archived on 11/Sep/2018
  • Stars
    star
    212
  • Rank 186,122 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[DEPRECATED] Lightweight, modular, and opinionated webpack CLI that provides a superior experience

npm node deps tests coverage chat size

webpack-command

DEPRECATED. Please use webpack-cli. If any features were not implemented in webpack-cli feel free to create issue.

Why deprecated webpack-command ?

  • webpack-cli is very stable and have more features.
  • Two CLIs are misleading for developers.
  • Hard to maintain two package with same purpose.
  • The author stopped developing the package.
  • Most of the features are already implemented in webpack-cli.

Thanks for using webpack! We apologize for the inconvenience. In the future, we will avoid such situations.


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 webpack-cli.

Requirements

This module requires a minimum of Node v6.14.0 and Webpack v4.0.0.

webpack-command and webpack-cli cannot be installed at the same time, as they both export a bin file named webpack. When trying webpack-command, please npm uninstall webpack-cli first.

Benefits

webpack-command has many advantages over other CLI experiences for webpack. These include:

  • 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 webpack-stylish
  • Support for webpack configuration in any language or compiler that provides a require hook
  • Support for webpack configuration in JSON, YAML, or JavaScript
  • 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% πŸ’ͺ)
  • A 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:

did you mean

Getting Started

To begin, you'll need to install webpack-command:

$ npm install webpack-command --save-dev

CLI

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.

$ wp --help

  A superior CLI experience for webpack. Lightweight, modular, and opinionated.

  Usage
    $ webpack [<config>, ...options]
    $ webpack <entry-file> [...<entry-file>] <output-file>
    $ webpack <command> [...options]

  Options
    --context                     The root directory for resolving entry point and stats
    --debug                       Switch loaders to debug mode
    --devtool                     Enable devtool for better debugging experience.
                                  e.g. --devtool eval-cheap-module-source-map
    --entry                       The entry point
    --help                        Show usage information and the options listed here
    --log-level                   Limit all process console messages to a specific level and above
                                  Levels: trace, debug, info, warn, error, silent
    --log-time                    Instruct the logger for webpack-serve and dependencies to display a timestamp
    --progress                    Instructs webpack to track and display build progress
    --reporter                    Specifies the reporter to use for generating console output for a build
    --require                     Preload one or more modules before loading the webpack configuration
                                  Typically used for language-specific require hooks
    --run-dev                     An alias for --debug --devtool eval-cheap-module-source-map --output-pathinfo
    --run-prod                    An alias for --optimize-minimize --define process.env.NODE_ENV="production"
    --version                     Display the webpack-command version
    --watch                       Watch the filesystem for changes

  Advanced
    --bail                        Abort the compilation on first error
    --cache                       Enable in memory caching
    --define                      Define any free var in the bundle
    --hot                         Enables Hot Module Replacement
    --plugin                      Load this plugin
    --prefetch                    Prefetch this request
                                  e.g. --prefetch ./file.js
    --profile                     Profile the compilation and include information in stats
    --provide                     Provide these modules as free vars in all modules
                                  e.g. --provide.jQuery jquery
    --records-input-path          Path to the records file (reading)
    --records-output-path         Path to the records file (writing)
    --records-path                Path to the records file
    --target                      The targeted execution environment
    --watch-aggregate-timeout     Timeout for gathering changes while watching
    --watch-poll                  The polling interval for watching (also enable polling)
    --watch-stdin                 Exit the process when stdin is closed

  Configuration File
    --config                      Path to the config file
    --config-name                 Name of the config to use
    --config-register             Deprecated. Please use --require.
    --mode                        Specifies the build mode to use; development or production

  Modules
    --module-bind                 Bind an extension to a loader
    --module-bind-post            Bind an extension to a postLoader
    --module-bind-pre             Bind an extension to a preLoader

  Optimization
    --optimize-max-chunks         Try to keep the chunk count below a limit
    --optimize-min-chunk-size     Try to keep the chunk size above a limit
    --optimize-minimize           Minimize javascript and switches loaders to minimizing

  Output
    --output                      The output path and file for compilation assets
    --output-chunk-filename       The output filename for additional chunks
    --output-filename             The output filename of the bundle
    --output-jsonp-function       The name of the JSONP function used for chunk loading
    --output-library              Expose the exports of the entry point as library
    --output-library-target       The type for exposing the exports of the entry point as library
    --output-path                 The output path for compilation assets
    --output-pathinfo             Include a comment with the request for every dependency (require, import, etc.)
    --output-public-path          The public path for the assets
    --output-source-map-filename  The output filename for the SourceMap

  Resolver
    --resolve-alias               Setup a module alias for resolving
                                  e.g. --resolve-alias.jquery jquery.plugin
    --resolve-extensions          Setup extensions that should be used to resolve modules
                                  e.g. .es6,.js
    --resolve-loader-alias        Setup a loader alias for resolving


    For further documentation, visit https://webpack.js.org/api/cli

  Commands
    help
    teach

    Type `webpack help <command>` for more information

As a convenience for alternative package managers, the webpack-command binary is also installed with this package.

Extendable Webpack Configurations

This module supports extending webpack configuration files with ESLint-style 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 example:

// base.config.js
module.exports = {
  name: 'base',
  mode: 'development',
  plugins: [...]
}
// webpack.config.js
module.exports = {
  extends: path.join(..., 'base-config.js'),
  name: 'dev'

The resulting configuration object would resemble:

{
  name: 'dev',
  mode: 'development',
  plugins: [...]
}

Read More about Extending Configuration Files

Commands

webpack-command allows users to extend the webpack CLI experience by including a few helpful built-in commands, and providing a means to develop third-party commands.

Built-In Commands

Flags

For more documentation on flags, please see the webpack-cli documentation.

Differences With webpack-cli

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 webpack CLI. Commands like init, migrate, and update are relegated to separate, user-installed modules.

That said, the following differences should also be noted:

The --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.

Key=Value Pairs

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 key=value syntax.

Entries

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 syntax.

Entries passed by flag in webpack-cli using --entry name=file should be migrated to use the --entry.name file syntax.

Resolve Alias

Resolve aliases passed by flag in webpack-cli using --resolve-alias alias=value should be migrated to use the --resolve-alias.{alias} {value} syntax.

Resolve Loader Alias

Resolve aliases passed by flag in webpack-cli using --resolve-loader-alias alias=value should be migrated to use the --resolve-loader-alias.alias value syntax.

Reporters

webpack-command supports custom, user-defined reporters which allow users full control over how build data is presented. By default, it ships with two available reporters:

basic

Displays the default webpack output, the same you'll see using webpack-cli.

stylish

The default reporter and displays beautiful output using the same code that drives webpack-stylish.

Building your own reporter is as easy as inheriting from the Reporter class located at lib/reporters/Reporter.js.

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 languages/compilers:

  • Babel ES6 Modules: webpack.config.js or webpack.config.es6, and use --require babel-register
  • Flow: webpack.config.js or webpack.config.flow, and use --require flow-remove-types/register
  • TypeScript: webpack.config.ts, and use --require ts-node/register

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.

Gotchas

Any entry files specified will overwrite entries in a webpack.config.js file as of this Pull Request in webpack-cli.

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

More Repositories

1

webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
JavaScript
12,576
star
2

mini-css-extract-plugin

Lightweight CSS extraction plugin
JavaScript
4,654
star
3

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools
HTML
4,588
star
4

css-loader

CSS Loader
JavaScript
4,300
star
5

extract-text-webpack-plugin

[DEPRECATED] Please use https://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
JavaScript
4,014
star
6

sass-loader

Compiles Sass to CSS
JavaScript
3,899
star
7

postcss-loader

PostCSS loader for webpack
JavaScript
2,855
star
8

copy-webpack-plugin

Copy files and directories with webpack
JavaScript
2,836
star
9

webpack-hot-middleware

Webpack hot reloading you can attach to your own server
JavaScript
2,336
star
10

terser-webpack-plugin

Terser Plugin
JavaScript
1,939
star
11

file-loader

File Loader
JavaScript
1,861
star
12

style-loader

Style Loader
JavaScript
1,651
star
13

worker-loader

A webpack loader that registers a script as a Web Worker
JavaScript
1,455
star
14

install-webpack-plugin

Speed up development by automatically installing & saving dependencies with Webpack.
JavaScript
1,430
star
15

compression-webpack-plugin

Prepare compressed versions of assets to serve them with Content-Encoding
JavaScript
1,409
star
16

url-loader

A loader for webpack which transforms files into base64 URIs
JavaScript
1,403
star
17

uglifyjs-webpack-plugin

[deprecated] UglifyJS Plugin
JavaScript
1,382
star
18

html-loader

HTML Loader
JavaScript
1,164
star
19

thread-loader

Runs the following loaders in a worker pool
JavaScript
1,121
star
20

webpack-serve

Repository has moved:
JavaScript
1,092
star
21

eslint-loader

[DEPRECATED] A ESlint loader for webpack
JavaScript
1,057
star
22

less-loader

Compiles Less to CSS
JavaScript
956
star
23

raw-loader

A loader for webpack that allows importing files as a String
JavaScript
844
star
24

purifycss-webpack

UNMAINTAINED, use https://github.com/FullHuman/purgecss-webpack-plugin
JavaScript
772
star
25

bundle-loader

Bundle Loader
JavaScript
658
star
26

cache-loader

[DEPRECATED] Caches the result of following loaders on disk
JavaScript
638
star
27

expose-loader

Expose Loader
JavaScript
546
star
28

imports-loader

Imports Loader
JavaScript
519
star
29

stylus-loader

🎨 A stylus loader for webpack.
JavaScript
499
star
30

babel-minify-webpack-plugin

[DEPRECATED] Babel Minify Webpack Plugin
JavaScript
493
star
31

svg-inline-loader

Inline SVG loader with cleaning-up functionality
JavaScript
490
star
32

json-loader

json loader module for webpack - UNMAINTAINED
JavaScript
436
star
33

closure-webpack-plugin

Webpack Google Closure Compiler and Closure Library plugin -
JavaScript
434
star
34

stylelint-webpack-plugin

A Stylelint plugin for webpack
JavaScript
426
star
35

source-map-loader

extract sourceMappingURL comments from modules and offer it to webpack
JavaScript
362
star
36

script-loader

[deprecated] Script Loader
JavaScript
325
star
37

i18n-webpack-plugin

[DEPRECATED] Embed localization into your bundle
JavaScript
317
star
38

css-minimizer-webpack-plugin

cssnano plugin for Webpack
JavaScript
315
star
39

istanbul-instrumenter-loader

Istanbul Instrumenter Loader
JavaScript
273
star
40

grunt-webpack

integrate webpack into grunt build process
JavaScript
267
star
41

react-proxy-loader

Wraps a react component in a proxy component to enable Code Splitting.
JavaScript
259
star
42

eslint-webpack-plugin

A ESLint plugin for webpack
JavaScript
257
star
43

image-minimizer-webpack-plugin

Webpack loader and plugin to compress images using imagemin
JavaScript
235
star
44

exports-loader

Exports Loader
JavaScript
216
star
45

webpack-stylish

A stylish, optionated reporter for webpack
JavaScript
200
star
46

val-loader

val loader module for webpack
JavaScript
183
star
47

mocha-loader

Mocha Loader
JavaScript
146
star
48

null-loader

[DEPRECATED] A loader that returns an empty module (can still be used for webpack 4).
JavaScript
145
star
49

coffee-loader

CoffeeScript Loader
JavaScript
144
star
50

webpack-hot-client

webpack HMR Client
JavaScript
121
star
51

node-loader

node loader for native modules
JavaScript
117
star
52

transform-loader

transform loader for webpack
JavaScript
110
star
53

webpack-defaults

Defaults to be shared across webpack projects
JavaScript
108
star
54

json5-loader

[Deprecated] JSON5 loader for Webpack (can still be used for webpack 4)
JavaScript
72
star
55

jshint-loader

[DEPRECATED] jshint loader for webpack, please migrate on `eslint`
JavaScript
67
star
56

webpack-canary

Canary tooling for checking webpack dependencies against specific webpack versions
JavaScript
47
star
57

multi-loader

[DEPRECATED] A loader that splits a module into multiple modules loaded with different loaders.
JavaScript
44
star
58

webpack-log

[DEPRECATED] Please use logger API https://github.com/webpack/webpack/pull/9436
JavaScript
38
star
59

zopfli-webpack-plugin

[DEPRECATED] Prepare compressed versions of assets with node-zopfli
JavaScript
26
star
60

component-webpack-plugin

Use components with webpack - UNMAINTAINED
JavaScript
20
star
61

remark-loader

Load markdown through remark with image resolving and some react-specific features.
JavaScript
16
star
62

json-minimizer-webpack-plugin

JSON minimizer webpack plugin
JavaScript
15
star
63

gzip-loader

[DEPRECATED] gzip loader module for webpack
JavaScript
15
star
64

yaml-frontmatter-loader

[DEPRECATED] Yaml frontmatter loader
JavaScript
14
star
65

config-loader

[DEPRECATED] A loader for webpack configuration files
JavaScript
14
star
66

html-minimizer-webpack-plugin

HTML minimizer webpack plugin
JavaScript
14
star
67

organization

Applications, Standards & Documentation for webpack-contrib.
13
star
68

i18n-loader

i18n loader module for webpack - UNMAINTAINED
JavaScript
11
star
69

eslint-config-webpack

Webpack standard eslint configuration
JavaScript
10
star
70

coffee-redux-loader

coffee redux loader module for webpack - UNMAINTAINED
JavaScript
7
star
71

test-utils

webpack Loader/Plugin Test Helpers
JavaScript
6
star
72

coverjs-loader

coverjs loader module for webpack - UNMAINTAINED
JavaScript
4
star
73

circleci-node8

[DEPRECATED] Please migrate on azure pipelines. CircleCI 2.0 NodeJS 8 build container -
Dockerfile
3
star
74

restyle-loader

[DEPRECATED] Use https://github.com/danielverejan/restyle-loader
JavaScript
3
star
75

tag-versions

A commandline wrapper around omichelsen/compare-versions to compare dist-tags
JavaScript
2
star
76

circleci-node-base

CircleCI 2.0 base build container -
Dockerfile
1
star
77

babel-preset-webpack

[DEPRECATED] Webpack Organization es2015 Babel Preset - See:
JavaScript
1
star
78

circleci-node9

[DEPRECATED] Please migrate on azure pipelines. CircleCI 2.0 NodeJS 9 build container -
Dockerfile
1
star
79

circleci-node-jdk8

Deprecated, use ->
1
star
80

cli-utils

[DEPRECATED] A suite of utilities for webpack projects which expose a CLI
JavaScript
1
star