Tool for fast and easy bootstraping Webpack & React projects
Last updated 16 days ago by sunflowerdeath .
Unlicense · Original npm · Tarball
$ cnpm install gnoll 
SYNC missed versions from official npm registry.

Gnoll :japanese_ogre:

Tool for fast and easy bootstraping Webpack & React projects. It can perform basic tasks without any configuration files. But if you need to change some settings, you can create config files in the your project and extend the default configuration.

Table of content


npm install gnoll

Gnoll has command line interface. You can add commands to the package.json file:

  "scripts": {
    "start": "gnoll start",
    "build": "gnoll build"


gnoll build

Creates optimized production build.


  • -e, --entry path
    Default: ./src/index.js
    Webpack entry file.

  • -o, --out path
    Default: ./build
    Path to the output directory.

  • --html path/to/index.html
    Default: ./src/index.html (if exists)
    Page that will be bundled with automatically injected assets using html-webpack-plugin.
    If you want to explicitly disable building html, use option --no-html.

  • --config path/to/webpack.config.js
    This option allows to provide path to the custom webpack config file.

  • --env=development|production
    Default: production
    Value of the NODE_ENV environment variable.

  • --target=web|node
    Default: web
    This options allows to specify target platform.

    • Sets webpack target option
    • When target is node sets ligraryTarget to commonjs
    • Sets targets options of the @babel/preset-env (unless you override it using any method supported by browserslist)
  • -o, --optimize-caching
    This option enables optimizations for long term caching of static assets.
    Optimizations are based on this guide from webpack documentation –

    • It inserts hash of file content in its filename. This allows to cache files forever, because changed files will always have different names.
    • Generates manifest.json file that maps original filenames to hashed ones.
  • --ssr
    Creates bundle for server side rendering.

    • Sets target to node.
    • Disables output of the static files and styles.
    • Disables bundling html page.

gnoll watch

Creates development build and rebuild on changes.
This command has same options as build, but default value for the --env option is development

gnoll start

Starts webpack development server.
Options are the same as for build command except for --env (it always is set to development) and --target (always is web)
This command uses webpack-serve module. You can configure it in the section serve in the webpack.config.js file.

gnoll lib

Use this command if you want to build library that should provide modules.
When building library, js files are compiled by Babel. Format of the modules is changed to CommonJS. All other files are copied as is. Result is placed in the lib directory.



-e, --entry
Default: ./src

-o, --out
Default: ./lib

Starts watcher that recompiles files on changes.

Embed inline source maps into compiled files.


This section describes how you can change configuration.


Default webpack config includes following loaders:

  • babel-loader for js and jsx files
  • file-loader for the following formats:
    • images: png svg jpg jpeg gif webp
    • fonts: eot ttf woff woff2
    • media: mp4 ogg webm mp3

Building styles is not included in gnoll by default, but you can add it with gnoll-styles plugin.

If you want to change something in the webpack config, you can create webpack.config.js in your project and extend the default config. For convenience, you can use webpack-merge for merging several webpack configs.

const merge = require('webpack-merge')
const baseConfig = require('gnoll/config/webpack')

module.exports = merge(baseConfig, {
    plugins [
    module: {
        rules: [
            { test: /\.smth$/, loader: 'some-loader' }

Extracting vendor and runtime chunks



Javascript is compiled with Babel. Default config uses following presets:

  • @babel/preset-env (ES6 syntax features)
  • @babel/preset-react (JSX syntax)

If you want to change change babel config, you can create .babelrc or babel.config.js file in the your project or set babel property in the package.json.

For example, this is how you can add support for decorators:

// babel.config.js
const baseConfig = require('gnoll/config/babel')

module.exports = {
	plugins: [
		['@babel/plugin-proposal-decorators', { legacy: true }],
		['@babel/plugin-proposal-class-properties', { loose: true }]



Env vars



Public domain, see the LICENCE file.

Copyright 2014 - 2017 © |