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 | [![chat][chat]][chat-url]
|
12 |
|
13 | # webpack-command
|
14 |
|
15 | 🔳 A proof-of-concept for a lightweight, modular, and opinionated webpack CLI.
|
16 |
|
17 | For users coming from `webpack-cli`, please read about
|
18 | [the differences](#differences-with-webpack-cli) between this module and
|
19 | `webpack-cli`.
|
20 |
|
21 | ## Requirements
|
22 |
|
23 | This module requires a minimum of Node v6.14.0 and Webpack v4.0.0.
|
24 |
|
25 | `webpack-command` and `webpack-cli` cannot be installed at the same time, as
|
26 | they both export a bin file named `webpack`. When trying `webpack-command`,
|
27 | please `npm uninstall webpack-cli` first.
|
28 |
|
29 | ## Benefits
|
30 |
|
31 | `webpack-command` has many advantages over other CLI experiences for `webpack`.
|
32 | These include:
|
33 |
|
34 | - A full test suite with 190 tests and 95% coverage (so close to 100% 💪)
|
35 | - A 93% smaller package cost versus `webpack-cli`
|
36 | - Highly focused on the User Experience and detail
|
37 | - Validation of commands, entries, and flags before further execution
|
38 | - Extensible third-party commands. Include only what you need!
|
39 | - A beautiful default user experience with output driven by
|
40 | [`webpack-stylish`](https://www.npmjs.com/package/webpack-stylish)
|
41 | - Custom Reporters 🤯
|
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 |
|
46 | And last, but not least, Did-You-Mean suggestions for flags:
|
47 |
|
48 | <img width="427" src="https://raw.githubusercontent.com/webpack-contrib/webpack-command/master/assets/did-you-mean.png" alt="did you mean">
|
49 |
|
50 | ## Getting Started
|
51 |
|
52 | To begin, you'll need to install `webpack-command`:
|
53 |
|
54 | ```console
|
55 | $ npm install webpack-command --save-dev
|
56 | ```
|
57 |
|
58 | ## CLI
|
59 |
|
60 | ```console
|
61 | $ webpack --help
|
62 |
|
63 | 🐕 A lightweight, modular, and opinionated webpack CLI
|
64 |
|
65 | Usage
|
66 | $ webpack [<config>, ...options]
|
67 | $ webpack <entry-file> [...<entry-file>] <output-file>
|
68 | $ weboack <command> [...options]
|
69 |
|
70 | Options
|
71 | --context The root directory for resolving entry point and stats
|
72 | --debug Switch loaders to debug mode
|
73 | --devtool Enable devtool for better debugging experience.
|
74 | e.g. --devtool eval-cheap-module-source-map
|
75 | --entry The entry point
|
76 | --help Show usage information and the options listed here
|
77 | --log-level Limit all process console messages to a specific level and above
|
78 | Levels: trace, debug, info, warn, error, silent
|
79 | --log-time Instruct the logger for webpack-serve and dependencies to display a timestamp
|
80 | --reporter Specifies the reporter to use for generating console output for a build
|
81 | --require Preload one or more modules before loading the webpack configuration
|
82 | Typically used for language-specific require hooks
|
83 | --run-dev An alias for --debug --devtool eval-cheap-module-source-map --output-pathinfo
|
84 | --run-prod An alias for --optimize-minimize --define process.env.NODE_ENV="production"
|
85 | --version Display the webpack-command version
|
86 | --watch Watch the filesystem for changes
|
87 |
|
88 | Advanced
|
89 | --bail Abort the compilation on first error
|
90 | --cache Enable in memory caching
|
91 | --define Define any free var in the bundle
|
92 | --hot Enables Hot Module Replacement
|
93 | --plugin Load this plugin
|
94 | --prefetch Prefetch this request
|
95 | e.g. --prefetch ./file.js
|
96 | --profile Profile the compilation and include information in stats
|
97 | --provide Provide these modules as free vars in all modules
|
98 | e.g. --provide.jQuery jquery
|
99 | --records-input-path Path to the records file (reading)
|
100 | --records-output-path Path to the records file (writing)
|
101 | --records-path Path to the records file
|
102 | --target The targeted execution environment
|
103 | --watch-aggregate-timeout Timeout for gathering changes while watching
|
104 | --watch-poll The polling interval for watching (also enable polling)
|
105 | --watch-stdin Exit the process when stdin is closed
|
106 |
|
107 | Configuration File
|
108 | --config Path to the config file
|
109 | --config-name Name of the config to use
|
110 | --config-register Deprecated. Please use --require.
|
111 | --mode Specifies the build mode to use; development or production
|
112 |
|
113 | Modules
|
114 | --module-bind Bind an extension to a loader
|
115 | --module-bind-post Bind an extension to a postLoader
|
116 | --module-bind-pre Bind an extension to a preLoader
|
117 |
|
118 | Optimization
|
119 | --optimize-max-chunks Try to keep the chunk count below a limit
|
120 | --optimize-min-chunk-size Try to keep the chunk size above a limit
|
121 | --optimize-minimize Minimize javascript and switches loaders to minimizing
|
122 |
|
123 | Output
|
124 | --output The output path and file for compilation assets
|
125 | --output-chunk-filename The output filename for additional chunks
|
126 | --output-filename The output filename of the bundle
|
127 | --output-jsonp-function The name of the JSONP function used for chunk loading
|
128 | --output-library Expose the exports of the entry point as library
|
129 | --output-library-target The type for exposing the exports of the entry point as library
|
130 | --output-path The output path for compilation assets
|
131 | --output-pathinfo Include a comment with the request for every dependency (require, import, etc.)
|
132 | --output-public-path The public path for the assets
|
133 | --output-source-map-filename The output filename for the SourceMap
|
134 |
|
135 | Resolver
|
136 | --resolve-alias Setup a module alias for resolving
|
137 | e.g. --resolve-alias.jquery jquery.plugin
|
138 | --resolve-extensions Setup extensions that should be used to resolve modules
|
139 | e.g. .es6,.js
|
140 | --resolve-loader-alias Setup a loader alias for resolving
|
141 |
|
142 |
|
143 | For further documentation, visit https://webpack.js.org/api/cli
|
144 |
|
145 | Commands
|
146 | help
|
147 | teach
|
148 |
|
149 | Type `webpack help <command>` for more information
|
150 | ```
|
151 |
|
152 | ## Commands
|
153 |
|
154 | `webpack-command` allows users to extend the `webpack` CLI experience by
|
155 | including a few helpful built-in commands, and providing a means to develop
|
156 | third-party commands.
|
157 |
|
158 | ### Built-In Commands
|
159 |
|
160 | - [Help Command](docs/HelpCommand.md)
|
161 | - [Teach Command](docs/TeachCommand.md)
|
162 |
|
163 | ## Flags
|
164 |
|
165 | For more documentation on flags, please see the
|
166 | [`webpack-cli` documentation](https://webpack.js.org/api/cli/).
|
167 |
|
168 | ## Differences With `webpack-cli`
|
169 |
|
170 | While this project aims for parity with `webpack-cli` in nearly all aspects,
|
171 | there are some notable differences. Included in those differences is the note
|
172 | that this module includes the bare minimum of commands to provide a `webpack`
|
173 | CLI. Commands like `init`, `migrate`, and `update` are relegated to separate,
|
174 | user-installed modules.
|
175 |
|
176 | That said, the following differences should also be noted:
|
177 |
|
178 | ### Key=Value Pairs
|
179 |
|
180 | Certain flags passed in `webpack-cli` allow for a key-value pair for
|
181 | pairing an alias with the alias value. e.g. `--entry name=file`. This module
|
182 | adopts a CLI-standard approach by using the syntax `--flag.key value` instead,
|
183 | and does not support the `key=value` syntax.
|
184 |
|
185 | ### Entries
|
186 |
|
187 | Specifying entries by either flag (`--flag`) or input (`webpack <file>`) require
|
188 | that the file or directory specified exist.
|
189 |
|
190 | Entries passed with a comma-separated value `--entry file,file2` are deprecated
|
191 | and should be migrated to use the CLI-standard `--entry file --entry file2`
|
192 | syntax.
|
193 |
|
194 | Entries passed by flag in `webpack-cli` using `--entry name=file` should be
|
195 | migrated to use the `--entry.name file` syntax.
|
196 |
|
197 | ### Resolve Alias
|
198 |
|
199 | Resolve aliases passed by flag in `webpack-cli` using
|
200 | `--resolve-alias alias=value` should be migrated to use the `--entry.name file`
|
201 | syntax.
|
202 |
|
203 | ### Resolve Loader Alias
|
204 |
|
205 | Resolve aliases passed by flag in `webpack-cli` using
|
206 | `--resolve-loader-alias alias=value` should be migrated to use the
|
207 | `--resolve-loader-alias.alias value` syntax.
|
208 |
|
209 | ## Reporters
|
210 |
|
211 | `webpack-command` ships with two available reporters:
|
212 |
|
213 | #### `basic`
|
214 |
|
215 | Displays the default `webpack` output, the same you'll see
|
216 | using `webpack-cli`.
|
217 |
|
218 | #### `stylish`
|
219 |
|
220 | The **default** reporter and displays beautiful output using the same code
|
221 | that drives [`webpack-stylish`](https://www.npmjs.com/package/webpack-stylish).
|
222 |
|
223 | ## Configuration Languages and Compilers
|
224 |
|
225 | `webpack-command` allows users to leverage any language that provides a require
|
226 | hook. To leverage this feature, define your configs as such for the following
|
227 | languages/compilers:
|
228 |
|
229 | - Babel ES6 Modules: `webpack.config.js` or `webpack.config.es6`, and use
|
230 | `--require babel-register`
|
231 | - Flow: `webpack.config.js` or `webpack.config.flow`, and use
|
232 | `--require flow-remove-types/register`
|
233 | - TypeScript: `webpack.config.ts`, and use `--require ts-node/register`
|
234 |
|
235 | Other hooks may work for additional language or compiler support.
|
236 |
|
237 | _Note: Compilers are not part of, nor built-into this module. To use a specific
|
238 | compiler, you must install it first._
|
239 |
|
240 | ## Gotchas
|
241 |
|
242 | Any entry files specified will overwrite entries in a `webpack.config.js` file
|
243 | as of [this Pull Request](https://github.com/webpack/webpack-cli/pull/358) in
|
244 | `webpack-cli`.
|
245 |
|
246 | ## Contributing
|
247 |
|
248 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
249 |
|
250 | #### [CONTRIBUTING](./.github/CONTRIBUTING)
|
251 |
|
252 | ## License
|
253 |
|
254 | #### [MIT](./LICENSE)
|
255 |
|
256 | [npm]: https://img.shields.io/npm/v/webpack-command.svg
|
257 | [npm-url]: https://npmjs.com/package/webpack-command
|
258 |
|
259 | [node]: https://img.shields.io/node/v/webpack-command.svg
|
260 | [node-url]: https://nodejs.org
|
261 |
|
262 | [deps]: https://david-dm.org/webpack-contrib/webpack-command.svg
|
263 | [deps-url]: https://david-dm.org/webpack-contrib/webpack-command
|
264 |
|
265 | [tests]: https://img.shields.io/circleci/project/github/webpack-contrib/webpack-command.svg
|
266 | [tests-url]: https://circleci.com/gh/webpack-contrib/webpack-command
|
267 |
|
268 | [cover]: https://codecov.io/gh/webpack-contrib/webpack-command/branch/master/graph/badge.svg
|
269 | [cover-url]: https://codecov.io/gh/webpack-contrib/webpack-command
|
270 |
|
271 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
272 | [chat-url]: https://gitter.im/webpack/webpack |
\ | No newline at end of file |