UNPKG

4.65 kBMarkdownView Raw
1[tests]: https://img.shields.io/circleci/project/github/shellscape/webpack-nano.svg
2[tests-url]: https://circleci.com/gh/shellscape/webpack-nano
3
4[cover]: https://codecov.io/gh/shellscape/webpack-nano/branch/master/graph/badge.svg
5[cover-url]: https://codecov.io/gh/shellscape/webpack-nano
6
7[size]: https://packagephobia.now.sh/badge?p=webpack-nano
8[size-url]: https://packagephobia.now.sh/result?p=webpack-nano
9
10<div align="center">
11 <img width="256" src="https://raw.githubusercontent.com/shellscape/webpack-nano/master/assets/nano.svg?sanitize=true" alt="webpack-nano"><br/><br/>
12</div>
13
14# webpack-nano [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![size][size]][size-url] [![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)
15
16
17A teensy, squeaky 🐤 clean Webpack CLI
18
19`webpack-nano` operates on the premise that all options for configuring a webpack build are set via a [config file](https://webpack.js.org/configuration/).
20
21## Install
22
23Using npm:
24
25```console
26npm install webpack-nano --save-dev
27```
28
29<a href="https://www.patreon.com/shellscape">
30 <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
31</a>
32
33## Requirements
34
35`webpack-nano` is an evergreen module. 🌲 This module requires an [Active LTS](https://github.com/nodejs/Release) Node version (v8.0.0+ or v10.0.0+).
36
37## Benefits
38
39- Holy bananas 🍌 it's itsy bitsy
40- Doesn't hit you over the head with an avalanche of flags and options
41- Allows any number of user-defined flags
42- It does one thing: tells webpack to start a build
43- ~90% smaller than webpack-cli and webpack-command
44
45## Usage
46
47```console
48$ npx wp --help
49
50 Usage
51 $ wp [...options]
52
53 Options
54 --config A path to a webpack config file
55 --config.{name} A path to a webpack config file, and the config name to run
56 --help Displays this message
57 --silent Instruct the CLI to produce no console output
58 --version Displays webpack-nano and webpack versions
59
60 Examples
61 $ wp
62 $ wp --help
63 $ wp --config webpack.config.js
64 $ wp --config.serve webpack.config.js
65```
66
67## Custom Flags
68
69With `webpack-cli` users are limited as to the flags they can use on with the `$ webpack` binary, and are instructed to use the `--env` flag for custom data. Well that's just 🍌🍌. With `webpack-nano` users can specify an unlimited number of custom flags, _without restriction_.
70
71Say you have a bundle which can be built to use different asset locations from cloud data sources, like Amazon S3 or Google Cloud Storage. And in this scenario you prefer to specify that location using a command-line flag. If you were using `webpack-cli`, you'd have to use the `--env.source` flag (or you'd get a big 'ol error) and use a function for your `webpack.config.js` export. Using `webpack-nano`:
72
73```console
74$ wp --config webpack.config.js --source s3
75```
76
77```js
78// webpack.config.js
79const argv = require('webpack-nano/argv');
80
81const { source } = argv;
82
83module.exports = {
84 ...
85}
86```
87
88✨ Magic. The `webpack-nano/argv` export provides quick and easy access to parsed command-line arguments, allowing the user to define the CLI experience as they want to.
89
90## Special Configuration File Types
91
92Webpack configuration files can be written using a variety of module loaders. e.g. Babel or TypeScript. `webpack-nano` allows users to use file types like `webpack.config.babel.js`, `webpack.config.es6`, `webpack.config.mjs`, and `webpack.config.ts`. Users are responsible for installing a compatible module loader when using these special file types. The table below represents the supported file types and their compatible loaders:
93
94| Extension | Compatible Loaders |
95| ------------| ------------------ |
96| `.babel.js` | `@babel/register`, `babel-register`, `babel-core/register`, `babel/register` |
97| `.babel.ts` | `@babel/register` |
98| `.es6` | `@babel/register` |
99| `.mjs` | `@babel/register` |
100| `.ts` | `ts-node/register`, `typescript-node/register`, `typescript-register`, `typescript-require` |
101
102## Build Stats
103
104This project attempts not to make assumptions about how a build should behave, and that includes webpack [`stats`](https://webpack.js.org/configuration/stats/). By default, `webpack-nano` will apply two `stats` options: `colors` (based on [`supports-color`](https://github.com/chalk/supports-color) and `exclude: ['node_modules']`). These can be quickly overridden by including these key/values in your stats configuration.
105
106## Meta
107
108[CONTRIBUTING](./.github/CONTRIBUTING.md)
109
110[LICENSE (Mozilla Public License)](./LICENSE)