wp-configurator

Webpack Configurator

Install

$ npm install wp-configurator

API

• Top-Level Exports
  • loader
  • loaders
  • plugin
  • plugins
  • merge
  • resolveAll
  • helpers
• Loader
  • merge
  • set
  • get
  • resolve
• Plugin
  • merge
  • set
  • get
  • resolve
• Helpers
  • concatMerge

Top-Level Exports

Below is a list of properties that are accessible at the top level of the module. Simply require the module into your script:

// Note: I use Pascal case when referencing external modules.
var Config = require("webpack-configurator");

loader(config)

Complex configurations often modify the properties of loaders. This utility helps aid composabilty by providing a number of methods that cater to common use cases. The example below shows how to construct a loader:

// The contents of 'babel' is a loader object wrapper.
var babel = Config.loader({
    test: /\.jsx?/,
    loader: "babel",
    query: {
        presets: ["es2015"]
    }
});

loaders(configs)

It's common to find configurations with multiple loaders. This utility provides a way to define several loaders at once, returning an array of loader object wrappers. Below is an example of its usage:

var loaders = Config.loaders([
    {
        test: /\.jsx?/,
        loader: "babel",
        query: {
            presets: ["es2015"]
        }
    },
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    }
]);

plugin(config)

It's sometimes difficult to customise plugins because of the way they differ from loaders. This utility makes it easier by splitting out the parameters. The plugin isn't created until the resolve method is called. Below is an example of its usage:

var Webpack = require("webpack");
 
var webpackDefine = Config.plugin({
    plugin: Webpack.DefinePlugin,
    parameters: [{
        VERSION: JSON.stringify("1.0.1"),
    }]
});

plugins(configs)

You may wish to define several plugins at once. This utility accepts an array of plugin configurations and returns an array of plugin object wrappers. Below is an example of its usage:

var Webpack = require("webpack");
 
var plugins = Config.plugins([
    {
        plugin: Webpack.DefinePlugin,
        parameters: [{
            VERSION: JSON.stringify("1.0.1")
        }]
    },
    {
        plugin: Webpack.UglifyJsPlugin,
        parameters: [{
            compress: {
                warnings: false
            }
        }]
    }
]);

merge(object, source, [customizer])

A generalised merge utility. It works in a similar way to loader.merge and plugin.merge, only this function has no validation on properties.

var base = {
    entry: "./base.entry.js",
    output: {
        filename: "bundle.js"
    }
};
 
module.exports = Config.merge(base, {
    devtool: "source-map",
    entry: "./dev.entry.js",
});

resolveAll(wrappers)

Useful when a configuration has several loaders or plugins. Each loader and plugin has a resolve method. This utility will call said method and return an array of resolved values.

var loaders = Config.loaders([
    {
        test: /\.jsx?$/,
        loader: "babel"
    },
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    }
]);
 
module.exports = {
    entry: "./base.entry.js",
    output: {
        filename: "bundle.js"
    },
    module: {
        loaders: Config.resolveAll(loaders)
    }
};

helpers

This object contains miscellaneous functions that help resolve common problems when creating Webpack configurations. Right now, there is only one helper available 'concatMerge'. However, this number will likely increase in the future.

Loader

loader.merge([property], changes, [customizer])

Basic example:

babel.merge({
    query: {
        presets: ["es2015", "react"]
    }
});

Property specific example:

babel.merge("query", {
    presets: ["es2015", "react"]
});

Function example:

babel.merge("query", function(config) {
    var presets = config.query.presets;
 
    return {
        presets: presets.concat(["react"])
    };
});

Resolve merge example:

babel.merge("loaders", function(config, loader) {
    var resolved = loader.resolve();
 
    return ExtractTextPlugin.extract(resolved.loaders);
});

Define merge behaviour example:

babel.merge("query", {
    presets: ["react"]
}, Config.helpers.concatMerge);

loader.set([property], changes)

Basic example:

babel.set({
    query: {
        presets: ["es2015", "react"]
    }
});

Property specific example:

babel.set("query", {
    presets: ["es2015", "react"]
});

Resolve set example:

var Config = require("webpack-configurator");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
var sass = Config.loader({
    test: /\.scss$/,
    loaders: ["style", "css", "sass"],
    queries: {
        css: {sourceMap: true},
        sass: {sourceMap: true}
    }
});
 
sass.set("loaders", function(config, loader) {
    var resolved = loader.resolve();
 
    return ExtractTextPlugin.extract(resolved.loaders);
});

loader.resolve()

Plugin

plugin.merge([index], changes)

Basic example:

webpackDefine.merge([{
    TWO: "1+1"
}]);

Property specific example:

webpackDefine.merge(0, {
    TWO: "1+1"
});

Another property specific example:

webpackDefine.merge({
    0: {TWO: "1+1"}
});

plugin.set([index], changes)

Basic example:

webpackDefine.set([{
    TWO: "1+1"
}]);

Property specific example:

webpackDefine.set(0, {
    TWO: "1+1"
});

Another property specific example:

webpackDefine.set({
    0: {TWO: "1+1"}
});

plugin.resolve()

Helpers

concatMerge

By default, merges will overwrite arrays. This helper provides a simple implementation that overrides said behaviour.

Basic example:

var Config = require("webpack-configurator");
 
var helpers = Config.helpers;
var sass = Config.loader({
    test: /\.scss$/,
    loaders: ["style", "css"]
});
 
sass.merge({
    loaders: ["sass"]
}, helpers.concatMerge());

Prepend example:

var Config = require("webpack-configurator");
 
var helpers = Config.helpers;
var base = {
    entry: [
        "./main.js"
    ],
    output: {
        filename: "bundle.js"
    }
};
 
module.exports = Config.merge(base, {
    entry: [
        "webpack-dev-server/client?http://localhost:8080"
    ]
}, helpers.concatMerge(true));