node package manager


Kantan(meaning "easy")

A relatively small Webpack based development server and build tool with hot-reload and available tree-shaking via Rollup.

This is designed as a quick and easy way to quickly spin up a server and enables you to simultaneously compile ES6 modules without a lot of the extra setup that would normally be a part of this workflow.It even supports CSS hot reloading as well.

This can also serve as a final build packaging tool using Rollup primarily but can also build with Webpack directly if you absolutely need to still use CommonJS modules. Rollup works with CommonJS too but tends to be less reliable during packaging.


  • at least node v6.9.1
  • npm version 3.10.8 or greater


Two ways

Method one

  • clone into node_modules
  • cd node_modules/kantan then npm install
  • node node_modules/kantan/bin/cli.js (or make up your own build script)

Method two

  • npm install -g kantan
  • run like any other command line script.


Kantan is primarily intended for use as a development server, but can also be used to build packages.

Each form has some available options

Mode independent flags

  • --mode specifies the mode to run Kantan in. By default it's run as a dev server.

Development server Options

  • --port Specifies the port to run the development server on.
  • --entry Specifies the path to the main entry file for your app/site
  • --public Specifies the directory that contains your html.
  • --config Specifies the path to your own webpack.config.js file. Will use a default file if one is not specified.

Note that tree-shaking qualities of Rollup are only done when building the final package.

Rollup Build options

Since rollup is the primary build mechanism, the flags are really only meant when using Rollup for final bundling.

  • --moduleName Really only necessary if you want to build a UMD compatible package, you'll need a module name. The default one is "kantan"
  • --packageFormat Specifies the type of package you want to build when using Rollup. If Webpack is desired, settings should be adjustable via a config file
  • --outputFilename the filename you want to use for your bundle. If not specified, will take the filename of your entry javascript file.
  • --preserveCommonjs Rollup is intended for ES6 modules only. There is a plugin that enables the automatic porting of CommonJs modules, but whether or not it works is totally dependent on how the module was created. Set this to true if you absolutely need a CommonJS module and can't port it to an ES6 module or for whatever other reason you might have. If set to true, will use Webpack to bundle instead. Note that Webpack currently does not support tree-shaking.

CSS parsing

This dev setup is primarily meant to JS based projects, but CSS parsing is included as well. This is utilizing PostCSS as a pre-processing step as it has a large variety of plugins to change your css however you'd like. By default, it'll compile scss syntax using precss. From previous testing, there isn't a difference that I can find yet, but keep in mind that this isn't using the normal Sass rubygem.

You can specify options for how to parse css within your config file using the key css. The key works with several parameters.

    // the values are default values 

As long as you're using the default config, you should get hot reloading for css as well provided that the command on the main entry javascript file. If you use a custom Webpack config, you can add the setup as a loader like so

           css:"../css/main.css" // or whatever your path is to your css file 

The loader provides a few global variables as well that can be used to help isolate development from production code. The loader uses Webpack's style-loader to automatically append your css file to the page.

    window.ENV = "dev";
    window.IS_DEV = true;


  • Hot-reloading is opt-in, meaning you have to manually specify which files should get hot reloaded on save. To do that, all you have to do is add to the end of your file.
  • Note that hot-reloading currently only works with 1.x version of Webpack as far as I'm aware of. The codebase has changed a bit for Webpack 2 and I haven't quite figured out how to get it working just yet.
  • the css, public and src directories contain test files, edit to your hearts content.


  • figure out why webpack building takes so long.
  • finish integrating minification