wub

wub is a tool designed to take the pain and repetition out of configuring webpack. wub is quite simply a function that takes the presets you specify and combines them into a valid webpack config. These presets enable features you want from webpack, like CSS modules or a hot reloading React environment.

With wub, your webpack config looks like this:

module.exports = require('wub')([
  require('wub-preset-preact'),
  require('wub-preset-postcss'),
  require('wub-preset-uglify'),
]);

Presets

A preset is either a valid webpack config, or if the preset needs additional configuration, a function that returns a valid webpack config.

A valid webpack config is either a config object or a function that returns a config object. Webpack config functions take two parameters:

1. an object of environmental variables passed to the CLI. Any command-line options prefixed with env. will appear in this object. For example, if you run webpack with the --env.printStats flag, this object will have printStats set to true.

2. a normalised object of command line options. Any command-line config options will appear in this object. For example, if you run webpack-dev-server with the --hot flag, this object will have hot set to true.

module.exports = require('wub')([
  require('wub-preset-preact')({
    rootComponent: './components/Site',
    domID: '.app-root',
  }),
  require('wub-preset-postcss'),
  require('wub-preset-uglify'),
]);

Configuration configuration 😓

Your webpack config might require settings that your presets cannot provide; perhaps an entrypoint or output options. In this case, you can provide a minimal webpack config object to the end of your presets and wub will merge it into the final webpack config.

module.exports = require('wub')([
  require('wub-preset-preact'),
  require('wub-preset-postcss'),
  require('wub-preset-uglify'),
  {
    output: {
      filename: 'bundle-[hash].js',
      path: './path/to/build/dir'
    }
  }
]);

You can also specify a function that will be treated like a preset with no configuration.

module.exports = require('wub')([
  require('wub-preset-preact'),
  require('wub-preset-postcss'),
  require('wub-preset-uglify'),
  function(env, webpackOptions) {
    return {
      output: {
        filename: webpackOptions.hot ? 'bundle.js' : 'bundle-[hash].js',
        path: './path/to/build/dir'
      }
    }
  },
]);