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:
moduleexports = ;
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:
-
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 runwebpack
with the--env.printStats
flag, this object will haveprintStats
set totrue
. -
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 havehot
set totrue
.
moduleexports = rootComponent: './components/Site' domID: '.app-root' ;
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.
moduleexports = 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.
moduleexports = { return output: filename: webpackOptionshot ? 'bundle.js' : 'bundle-[hash].js' path: './path/to/build/dir' };