1 | <div align="center">
|
2 | <a href="https://github.com/webpack/webpack">
|
3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![deps][deps]][deps-url]
|
10 | [![tests][tests]][tests-url]
|
11 | [![coverage][cover]][cover-url]
|
12 | [![chat][chat]][chat-url]
|
13 | [![size][size]][size-url]
|
14 |
|
15 | # webpack-command
|
16 |
|
17 | A superior CLI experience for webpack. Lightweight, modular, and opinionated.
|
18 |
|
19 | For users coming from `webpack-cli`, please read about
|
20 | [the differences](#differences-with-webpack-cli) between this module and
|
21 | `webpack-cli`.
|
22 |
|
23 | ## Requirements
|
24 |
|
25 | This module requires a minimum of Node v6.14.0 and Webpack v4.0.0.
|
26 |
|
27 | `webpack-command` and `webpack-cli` cannot be installed at the same time, as
|
28 | they both export a bin file named `webpack`. When trying `webpack-command`,
|
29 | please `npm uninstall webpack-cli` first.
|
30 |
|
31 | ## Benefits
|
32 |
|
33 | `webpack-command` has many advantages over other CLI experiences for `webpack`.
|
34 | These include:
|
35 |
|
36 | - [Extendable Webpack Configurations](#extendable-webpack-configurations). A
|
37 | configuration file can extend the properties and collections from base
|
38 | configurations, and are filtered intelligently.
|
39 | - Custom Reporters 🤯
|
40 | - A beautiful default user experience with output driven by
|
41 | [`webpack-stylish`](https://www.npmjs.com/package/webpack-stylish)
|
42 | - Support for `webpack` configuration in any language or compiler that provides
|
43 | a `require` hook
|
44 | - Support for `webpack` configuration in `JSON`, `YAML`, or `JavaScript`
|
45 | - Validation of commands, entries, and flags before further execution
|
46 | - Extensible third-party commands. Include only what you need!
|
47 | - A full test suite with 220 tests and 95% coverage (so close to 100% 💪)
|
48 | - A ~~93%~~ 24% smaller package cost versus `webpack-cli` (it used to be 93%,
|
49 | they got wise after _webpack-command_ was released)
|
50 | - Highly focused on the User Experience and detail
|
51 |
|
52 | And last but not least, Did-You-Mean suggestions for flags:
|
53 |
|
54 | <img width="427" src="https://raw.githubusercontent.com/webpack-contrib/webpack-command/master/assets/did-you-mean.png" alt="did you mean">
|
55 |
|
56 | ## Getting Started
|
57 |
|
58 | To begin, you'll need to install `webpack-command`:
|
59 |
|
60 | ```console
|
61 | $ npm install webpack-command --save-dev
|
62 | ```
|
63 |
|
64 | ## CLI
|
65 |
|
66 | The primary binary for webpack-command is `wp` (because who doesn't like to save
|
67 | keystrokes!?) Although, you may also use the `webpack` binary as per usual if
|
68 | your setup installs this module _after_ webpack, and the two don't conflict.
|
69 |
|
70 | ```console
|
71 | $ wp --help
|
72 |
|
73 | A superior CLI experience for webpack. Lightweight, modular, and opinionated.
|
74 |
|
75 | Usage
|
76 | $ webpack [<config>, ...options]
|
77 | $ webpack <entry-file> [...<entry-file>] <output-file>
|
78 | $ webpack <command> [...options]
|
79 |
|
80 | Options
|
81 | --context The root directory for resolving entry point and stats
|
82 | --debug Switch loaders to debug mode
|
83 | --devtool Enable devtool for better debugging experience.
|
84 | e.g. --devtool eval-cheap-module-source-map
|
85 | --entry The entry point
|
86 | --help Show usage information and the options listed here
|
87 | --log-level Limit all process console messages to a specific level and above
|
88 | Levels: trace, debug, info, warn, error, silent
|
89 | --log-time Instruct the logger for webpack-serve and dependencies to display a timestamp
|
90 | --progress Instructs webpack to track and display build progress
|
91 | --reporter Specifies the reporter to use for generating console output for a build
|
92 | --require Preload one or more modules before loading the webpack configuration
|
93 | Typically used for language-specific require hooks
|
94 | --run-dev An alias for --debug --devtool eval-cheap-module-source-map --output-pathinfo
|
95 | --run-prod An alias for --optimize-minimize --define process.env.NODE_ENV="production"
|
96 | --version Display the webpack-command version
|
97 | --watch Watch the filesystem for changes
|
98 |
|
99 | Advanced
|
100 | --bail Abort the compilation on first error
|
101 | --cache Enable in memory caching
|
102 | --define Define any free var in the bundle
|
103 | --hot Enables Hot Module Replacement
|
104 | --plugin Load this plugin
|
105 | --prefetch Prefetch this request
|
106 | e.g. --prefetch ./file.js
|
107 | --profile Profile the compilation and include information in stats
|
108 | --provide Provide these modules as free vars in all modules
|
109 | e.g. --provide.jQuery jquery
|
110 | --records-input-path Path to the records file (reading)
|
111 | --records-output-path Path to the records file (writing)
|
112 | --records-path Path to the records file
|
113 | --target The targeted execution environment
|
114 | --watch-aggregate-timeout Timeout for gathering changes while watching
|
115 | --watch-poll The polling interval for watching (also enable polling)
|
116 | --watch-stdin Exit the process when stdin is closed
|
117 |
|
118 | Configuration File
|
119 | --config Path to the config file
|
120 | --config-name Name of the config to use
|
121 | --config-register Deprecated. Please use --require.
|
122 | --mode Specifies the build mode to use; development or production
|
123 |
|
124 | Modules
|
125 | --module-bind Bind an extension to a loader
|
126 | --module-bind-post Bind an extension to a postLoader
|
127 | --module-bind-pre Bind an extension to a preLoader
|
128 |
|
129 | Optimization
|
130 | --optimize-max-chunks Try to keep the chunk count below a limit
|
131 | --optimize-min-chunk-size Try to keep the chunk size above a limit
|
132 | --optimize-minimize Minimize javascript and switches loaders to minimizing
|
133 |
|
134 | Output
|
135 | --output The output path and file for compilation assets
|
136 | --output-chunk-filename The output filename for additional chunks
|
137 | --output-filename The output filename of the bundle
|
138 | --output-jsonp-function The name of the JSONP function used for chunk loading
|
139 | --output-library Expose the exports of the entry point as library
|
140 | --output-library-target The type for exposing the exports of the entry point as library
|
141 | --output-path The output path for compilation assets
|
142 | --output-pathinfo Include a comment with the request for every dependency (require, import, etc.)
|
143 | --output-public-path The public path for the assets
|
144 | --output-source-map-filename The output filename for the SourceMap
|
145 |
|
146 | Resolver
|
147 | --resolve-alias Setup a module alias for resolving
|
148 | e.g. --resolve-alias.jquery jquery.plugin
|
149 | --resolve-extensions Setup extensions that should be used to resolve modules
|
150 | e.g. .es6,.js
|
151 | --resolve-loader-alias Setup a loader alias for resolving
|
152 |
|
153 |
|
154 | For further documentation, visit https://webpack.js.org/api/cli
|
155 |
|
156 | Commands
|
157 | help
|
158 | teach
|
159 |
|
160 | Type `webpack help <command>` for more information
|
161 | ```
|
162 |
|
163 | As a convenience for alternative package managers, the `webpack-command` binary
|
164 | is also installed with this package.
|
165 |
|
166 | ## Extendable Webpack Configurations
|
167 |
|
168 | This module supports extending webpack configuration files with
|
169 | [ESLint-style](https://eslint.org/docs/user-guide/configuring#extending-configuration-files)
|
170 | `extends` functionality. This feature allows users to create a "base" config and
|
171 | in essence, "inherit" from that base config in a separate config. A bare-bones
|
172 | example:
|
173 |
|
174 | ```js
|
175 | // base.config.js
|
176 | module.exports = {
|
177 | name: 'base',
|
178 | mode: 'development',
|
179 | plugins: [...]
|
180 | }
|
181 | ```
|
182 |
|
183 | ```js
|
184 | // webpack.config.js
|
185 | module.exports = {
|
186 | extends: path.join(..., 'base-config.js'),
|
187 | name: 'dev'
|
188 | ```
|
189 |
|
190 | The resulting configuration object would resemble:
|
191 |
|
192 | ```js
|
193 | {
|
194 | name: 'dev',
|
195 | mode: 'development',
|
196 | plugins: [...]
|
197 | }
|
198 | ```
|
199 |
|
200 | [Read More about Extending Configuration Files](https://github.com/webpack-contrib/config-loader/blob/master/docs/EXTENDS.md)
|
201 |
|
202 | ## Commands
|
203 |
|
204 | `webpack-command` allows users to extend the `webpack` CLI experience by
|
205 | including a few helpful built-in commands, and providing a means to develop
|
206 | third-party commands.
|
207 |
|
208 | ### Built-In Commands
|
209 |
|
210 | - [Help Command](docs/HelpCommand.md)
|
211 | - [Teach Command](docs/TeachCommand.md)
|
212 |
|
213 | ## Flags
|
214 |
|
215 | For more documentation on flags, please see the
|
216 | [`webpack-cli` documentation](https://webpack.js.org/api/cli/).
|
217 |
|
218 | ## Differences With `webpack-cli`
|
219 |
|
220 | While this project aims for parity with `webpack-cli` in nearly all aspects,
|
221 | there are some notable differences. Included in those differences is the note
|
222 | that this module includes the bare minimum of commands to provide a `webpack`
|
223 | CLI. Commands like `init`, `migrate`, and `update` are relegated to separate,
|
224 | user-installed modules.
|
225 |
|
226 | That said, the following differences should also be noted:
|
227 |
|
228 | ### The `--env` Flag is Nuked
|
229 |
|
230 | [Environment Variables](https://en.wikipedia.org/wiki/Environment_variable) have
|
231 | been around a very, very long time. `webpack-cli` chose to introduce a feature
|
232 | that let users specify environment variables via a flag. This module does not
|
233 | include that feature. Instead, users should make use of environment variables
|
234 | the traditional, standard way:
|
235 |
|
236 | `$ NEAT_VAR=woo webpack ...`
|
237 |
|
238 | And access the values via `process.env`. Alternatively, if users are in need of
|
239 | cross-platform environment variables, a tool such as
|
240 | [`cross-env`](https://www.npmjs.com/package/cross-env) should be leveraged.
|
241 |
|
242 | ### Key=Value Pairs
|
243 |
|
244 | Certain flags passed in `webpack-cli` allow for a key-value pair for
|
245 | pairing an alias with the alias value. e.g. `--entry name=file`. This module
|
246 | adopts a CLI-standard approach by using the syntax `--flag.key value` instead,
|
247 | and does not support the `key=value` syntax.
|
248 |
|
249 | ### Entries
|
250 |
|
251 | Specifying entries by either flag (`--flag`) or input (`webpack <file>`) require
|
252 | that the file or directory specified exist.
|
253 |
|
254 | Entries passed with a comma-separated value `--entry file,file2` are deprecated
|
255 | and should be migrated to use the CLI-standard `--entry file --entry file2`
|
256 | syntax.
|
257 |
|
258 | Entries passed by flag in `webpack-cli` using `--entry name=file` should be
|
259 | migrated to use the `--entry.name file` syntax.
|
260 |
|
261 | ### Resolve Alias
|
262 |
|
263 | Resolve aliases passed by flag in `webpack-cli` using
|
264 | `--resolve-alias alias=value` should be migrated to use the `--resolve-alias.{alias} {value}`
|
265 | syntax.
|
266 |
|
267 | ### Resolve Loader Alias
|
268 |
|
269 | Resolve aliases passed by flag in `webpack-cli` using
|
270 | `--resolve-loader-alias alias=value` should be migrated to use the
|
271 | `--resolve-loader-alias.alias value` syntax.
|
272 |
|
273 | ## Reporters
|
274 |
|
275 | `webpack-command` supports custom, user-defined reporters which allow users
|
276 | full control over how build data is presented. By default, it ships with two
|
277 | available reporters:
|
278 |
|
279 | #### `basic`
|
280 |
|
281 | Displays the default `webpack` output, the same you'll see
|
282 | using `webpack-cli`.
|
283 |
|
284 | #### `stylish`
|
285 |
|
286 | The **default** reporter and displays beautiful output using the same code
|
287 | that drives [`webpack-stylish`](https://www.npmjs.com/package/webpack-stylish).
|
288 |
|
289 | Building your own reporter is as easy as inheriting from the `Reporter` class
|
290 | located at `lib/reporters/Reporter.js`.
|
291 |
|
292 | ## Configuration Languages and Compilers
|
293 |
|
294 | `webpack-command` allows users to leverage any language that provides a require
|
295 | hook. To leverage this feature, define your configs as such for the following
|
296 | languages/compilers:
|
297 |
|
298 | - Babel ES6 Modules: `webpack.config.js` or `webpack.config.es6`, and use
|
299 | `--require babel-register`
|
300 | - Flow: `webpack.config.js` or `webpack.config.flow`, and use
|
301 | `--require flow-remove-types/register`
|
302 | - TypeScript: `webpack.config.ts`, and use `--require ts-node/register`
|
303 |
|
304 | Other hooks may work for additional language or compiler support.
|
305 |
|
306 | _Note: Compilers are not part of, nor built-into this module. To use a specific
|
307 | compiler, you must install it first._
|
308 |
|
309 | ## Gotchas
|
310 |
|
311 | Any entry files specified will overwrite entries in a `webpack.config.js` file
|
312 | as of [this Pull Request](https://github.com/webpack/webpack-cli/pull/358) in
|
313 | `webpack-cli`.
|
314 |
|
315 | ## Contributing
|
316 |
|
317 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
318 |
|
319 | #### [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
320 |
|
321 | ## License
|
322 |
|
323 | #### [MIT](./LICENSE)
|
324 |
|
325 | [npm]: https://img.shields.io/npm/v/webpack-command.svg
|
326 | [npm-url]: https://npmjs.com/package/webpack-command
|
327 |
|
328 | [node]: https://img.shields.io/node/v/webpack-command.svg
|
329 | [node-url]: https://nodejs.org
|
330 |
|
331 | [deps]: https://david-dm.org/webpack-contrib/webpack-command.svg
|
332 | [deps-url]: https://david-dm.org/webpack-contrib/webpack-command
|
333 |
|
334 | [tests]: https://img.shields.io/circleci/project/github/webpack-contrib/webpack-command.svg
|
335 | [tests-url]: https://circleci.com/gh/webpack-contrib/webpack-command
|
336 |
|
337 | [cover]: https://codecov.io/gh/webpack-contrib/webpack-command/branch/master/graph/badge.svg
|
338 | [cover-url]: https://codecov.io/gh/webpack-contrib/webpack-command
|
339 |
|
340 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
341 | [chat-url]: https://gitter.im/webpack/webpack
|
342 |
|
343 | [size]: https://packagephobia.now.sh/badge?p=webpack-command
|
344 | [size-url]: https://packagephobia.now.sh/result?p=webpack-command
|