weblo

Webpack Environment Based Loader Options

WEBLO allows you to add custom keys to your loader options based on the environment you are currently running in.

NOTE this will only work with Webpack 2 which (at the time of writing) is currently only available as a release candidate.

In the past developers have sometimes needed to define their webpack loaders twice (or more) once for development and once for production often with repeated options, like so:

webpack.dev.config:

rules: [
    test: /\.css$/,
    use: [
        {
            loader: 'css-loader',
            options: {
                url: false,
                minimize: false,
                sourceMap: true,
            },
        },
    ],
],

webpack.prod.config:

rules: [
    test: /\.css$/,
    use: [
        {
            loader: 'css-loader',
            options: {
                url: false,
                minimize: true,
                sourceMap: false,
            },
        },
    ],
],

Or alternatively one could use ugly ternaries that require a development or production environment to be defined, there can also only be two environments when using this kind of boolean logic, like so:

webpack.config:

rules: [
    test: /\.css$/,
    use: [
        {
            loader: 'css-loader',
            options: {
                url: false,
                minimize: development ? false : true,
                sourceMap: development ? true : false,
            },
        },
    ],
],

WEBLO fixes this by adding two additional keys to the loader object (development and production), additional keys can be defined in the package.json if needed.

So the new syntax looks like this.

webpack.config:

const weblo = require('weblo');

let config = {
    module: {
        rules: [
            test: /\.css$/,
            use: [
                {
                    loader: 'css-loader',
                    options: {
                        url: false,    
                    },
                    development: {
                        sourceMap: true
                    },
                    production: {
                        minimize: true,
                    },
                },
            ],
        ],    
    },
},

weblo('development', config);

The above code will merge the development object with the options object. If the options key does not exist it will create it.

Or if you like environment variables you can initiate like below:

weblo(JSON.stringify(process.env.NODE_ENV), config);

If you wish to add your own keys you can add a weblo key to your projects package.json, like so:

"weblo": [
	"testing",
	"development",
	"production"
]

NOTE if you do this you will need to difine all of your keys i.e. it will not retain the existing development and production keys.

This plugin might not be the best implementation to solve this problem, but it works so far, I do plan to intergrate it more tightly as a webpack plugin and perhaps match the syntax better but for now PR's are more than welcome.