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.
node node_modules/kantan/bin/cli.js(or make up your own build script)
npm install -g kantan
Kantan is primarily intended for use as a development server, but can also be used to build packages.
Each form has some available options
--modespecifies the mode to run Kantan in. By default it's run as a dev server.
--portSpecifies the port to run the development server on.
--entrySpecifies the path to the main entry file for your app/site
--publicSpecifies the directory that contains your html.
--configSpecifies 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.
Since rollup is the primary build mechanism, the flags are really only meant when using Rollup for final bundling.
--moduleNameReally only necessary if you want to build a UMD compatible package, you'll need a module name. The default one is "kantan"
--packageFormatSpecifies the type of package you want to build when using Rollup. If Webpack is desired, settings should be adjustable via a config file
--preserveCommonjsRollup 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.
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.
Due to changes in Webpack 2 where the configuration object is very strict in what goes into it, the CSS parsing has been moved into it's
own separate library. However, the configuration is more or less the same, though this time, you'll need to keep a
css.js file in your
Note that on Windows, the
watcherOptions key is required as Chokidar seems to have issues properly watching reloading.
// the values are default valuesmoduleexports =// source directorysrcDir:`/css`// destination directorydestDir:`/public/css`// main css fileentry:`main.css`// filename you want written for the final bundledest:`main.css`// Chokidar options - this is necessary on Windows(possibly Linux but I've used Chokidar without these on OSX in the past)watcherOptions:persistent: trueusePolling:trueinterval:100// any additional PostCSS pluginsplugins:
As long as you're using the default config, you should get hot reloading for css as well provided that
add the setup as a loader like so
test:/\.js$/exclude://loader:`kantan/lib/devsetup.js`query: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.
windowENV = "dev";windowIS_DEV = true;
module.hot.accept()to the end of your file.
srcdirectories contain test files, edit to your hearts content.