Need help with webpack-nano?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

shellscape
218 Stars 7 Forks Mozilla Public License 2.0 68 Commits 1 Opened issues

Description

A teensy, squeaky 🐤 clean Webpack CLI

Services available

!
?

Need anything else?

Contributors list

# 28,283
JavaScr...
rollup
Koa
hot-mod...
60 commits
# 7,262
JavaScr...
React
ecmascr...
uglify
2 commits
# 1,721
minific...
svgo
coffees...
mjml
2 commits
# 19,620
TypeScr...
fs
faceboo...
eslint-...
1 commit
webpack-nano

webpack-nano tests cover size libera manifesto

A teensy, squeaky 🐤 clean Webpack CLI

webpack-nano
operates on the premise that all options for configuring a webpack build are set via a config file.

Install

Using npm:

npm install webpack-nano --save-dev

Requirements

webpack-nano
is an evergreen module. 🌲 This module requires an Active LTS Node version (v10.0.0+).

Benefits

  • Holy bananas 🍌 it's itsy bitsy
  • Doesn't hit you over the head with an avalanche of flags and options
  • Allows any number of user-defined flags
  • It does one thing: tells webpack to start a build
  • ~90% smaller than webpack-cli and webpack-command

Usage

$ npx wp --help

Usage $ wp [...options]

Options --config A path to a webpack config file --config.{name} A path to a webpack config file, and the config name to run --json Emit bundle information as JSON --help Displays this message --silent Instruct the CLI to produce no console output --version Displays webpack-nano and webpack versions

Examples $ wp $ wp --help $ wp --config webpack.config.js $ wp --config.serve webpack.config.js

Custom Flags

With

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.

Say 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
:
$ wp --config webpack.config.js --source s3
// webpack.config.js
const argv = require('webpack-nano/argv');

const { source } = argv;

module.exports = { ... }

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

Special Configuration File Types

Webpack 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:

| Extension | Compatible Loaders | | ------------| ------------------ | |

.babel.js
|
@babel/register
,
babel-register
,
babel-core/register
,
babel/register
| |
.babel.ts
|
@babel/register
| |
.es6
|
@babel/register
| |
.mjs
|
@babel/register
| |
.ts
|
ts-node/register
,
typescript-node/register
,
typescript-register
,
typescript-require
|

Build Stats

This project attempts not to make assumptions about how a build should behave, and that includes webpack

stats
. By default,

webpack-nano
will apply two
stats
options:
colors
(based on
supports-color
and
exclude: ['node_modules']
). These can be quickly overridden by including these key/values in your stats configuration.

Meta

CONTRIBUTING

LICENSE (Mozilla Public License)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.