webpack-tools

A collection of helpers to make maintaining a webpack config a little easier.

loader

Provides a fluent interface for the loader syntax:

import { test } from 'webpack-tools'
 
const jsloader =
  test('*.js')
    .includes(path.resolve(__dirname, '../src/*'))
    .excludes('node_modules/*')
    .load('babel')
    .load('eslint', {
       emitError: false
     , configFile: './eslintrc'
     })

would be the same as writing:

const jsloader = {
  test: /^.*\.js$/
, loader: 'eslint-loader?{"emitError":false,"configFile":"./eslintrc"}!babel-loader'
, include: [
    /^\/Users\/romeovs\/code\/webpack-tools\/src\/.*$/
  ]
, exclude: [
     /^node_modules\/.*$/
  ]
};

The main differences are:

• loader allows glob syntax instead of plain regexes (which are also supported) for specifying test, includes and excludes.
• This api makes more use of primitive datastructures instead of strings. (look at the options passed to the eslint loader.
• Every loader object is immutable, so every call to one of its methods returns a new loader. This makes it easy to extend loaders without much confusion:

  const base   = test('*.js')       // ...
  const lint   = base.load('lint')  // ...
  const babel  = base.load('babel') // ...

• You can only create a loader by calling test.

merge

Provides an easy way to merge several partial configs. This is just a simple function that recursivly merges mixed datastructures (consisting of arrays and objects).

production

Check wether or not we are in production mode. Checks if the -p or --optimize-minize flags are set or if the NODE_ENV is set to production.

clean

Cleans falsy plugins from a config so we can write code like this:

const conf = {
  /* ... */
  plugins: [
    production ? new FooPlugin(bar, baz) : false
  ]
}