node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


React Power

Travis Status NPM LICENSE


Command line toolkit includes full-featured scripts powered by React ecosystem.

Quickly start a web app development with none configuration, or optionally add a minimal config file when needed.


Require Node.js v7.6 or later. (for async/await supporting)

Getting Started

Creates new work directory.

$ mkdir my-app
$ cd my-app

Intalls react-power with npm or yarn.

$ yarn init
$ yarn add --dev react-power

Adds scripts to package.json.

"scripts": {
  "dev": "react-power dev",
  "build": "react-power build",
  "clean": "react-power clean"

Writes some source code.

$ mkdir src
$ echo 'document.getElementById("root").innerHTML = "Hello world!"' > src/index.js
$ echo \
'<!DOCTYPE html>
    <meta charset="utf-8">
    <title>React Power</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <div id="root"></div>
</html>' \
> src/template.html

Tries running script dev, build, clean.

$ yarn run dev
$ yarn run build
$ yarn run clean


Create a file react-power.config.js in root directory. In it, you'll configure like this:

module.exports = {
  input: './src',
  output: './dist',
  publicPath: '/',
  multi: false,
  ignore: /shared/,
  vendor: [],
  externals: {},
  babelrc: {},
  rules: [],
  browserslist: ['last 2 versions', '> 5%', 'ie > 8'],
  cssModules: true,
  hot: true,
  hash: true,
  host: 'localhost',
  port: 3000,
  open: false

Options Reference

Option Type Default Description
input String './src' Where react-power resolve source code.
output String './dist' Where react-power output bundles.
publicPath String '/' Specifies the public URL of the output directory when referenced in a browser.
multi Boolean false Whether is a multi page application or not.
ignore RegExp /shared/ Ignores the module name using regexp only effective when multi is true.
vendor Array Specifies the vendor modules to make them seperate from main bundle.
externals Object Provides a way of excluding dependencies from the output bundles.
babelrc Object Extends built-in babel transforming configuration.
rules Array Extends built-in loader rules configuration.
browserslist Array ['last 2 versions', '> 5%', 'ie > 8'] Declare supported environments by performing queries both applied to js and css.
cssModules Boolean true Whether enables css modules or not.
hot Boolean true Whether enables hot module replacement or not.
hash Boolean true Whether enables hash and chunkhash bundles or not.
host String 'localhost' Local development server host.
port Number 3000 Local development server port.
open Boolean false Whether open the browser immediately when bundles are finished.

Buit-in Features


  • babel-preset-env
  • babel-preset-stage-0
  • babel-preset-react
  • react-hot-loader/babel
  • babel-plugin-transform-runtime


  • babel-loader
  • json-loader
  • sass-loader
  • less-loader
  • url-loader


See more examples for usage detail.


Released under the MIT license.