Environmentally

Create an environment-driven webpack.config.js

Table of Contents

• Installation
• Introduction
• Usage
• API
• Helpers
• Interoperability
• Support
• Contributing

Installation

yarn add -D environmentally

Introduction

This is a tool that simplifies the creation of webpack configurations that are sensitive to the environment. This is especially useful when it's difficult to switch between development and production organically.

Usage

Just wrap your webpack config using Environmentally as follows:

Example #1

const Environmentally = require('environmentally');

module.exports = Environmentally(({ DEVELOPMENT, PRODUCTION }) => {
    return {
        plugins: [
            PRODUCTION ? new ProductionPlugin : new DevelopmentPlugin
        ]
    }
})

Read more about Helpers.

Example #2

const Environmentally = require('environmentally');
const When = require('environmentally/when');

module.exports = Environmentally(({ DEVELOPMENT, PRODUCTION }) => {
    return {
        plugins: [
            When({
                [PRODUCTION]: new ProductionPlugin,
                [DEVELOPMENT]: new DevelopmentPlugin,
            })
        ]
    }
})

Read more about Helpers.

Example #3

const Environmentally = require('environmentally');

module.exports = Environmentally(({ DEVELOPMENT, PRODUCTION }) => {
    if (DEVELOPMENT) {
        return require('./webpack.dev.js');
    }

    if (PRODUCTION) {
        return require('./webpack.prod.js');
    }
})

Example #4

const Environmentally = require('environmentally');

module.exports = Environmentally(({ ENV }) => {
    return require('./webpack.' + ENV + '.js')
});

API

Environmentally

const Environmentally = require('environmentally');

module.exports = Environmentally(({ DEVELOPMENT, PRODUCTION, ENV, MODE, WEBPACK_ARGV }) => {
    // ...
});

Below there's a table explaining how the values are determined:

| COMMAND | DEVELOPMENT | PRODUCTION | MODE | ENV | - | -: | -: | -: | -: | webpack -d | true | false | development | development | webpack -p | false | true | production | production | webpack --mode development | true | false | development | development | webpack --mode production | false | true | production | production | webpack -p --env production2 | false | true | production | production2 | webpack -d --env development2 | true | false | development | development2

Helpers

The following helpers work well with Environmentally:

• Ternary operator (imperative)

    true ? 'foo' : 'bar' // === 'foo'

• Binary operator (imperative)

    true && 'baz' // === 'baz'

• When (declarative)

const When = require('environmentally/when');

When({
    [true]: 'corge',
    [false]: 'grault',
}) // === 'corge'

Interoperability

Environmentally works well with Babel (BABEL_ENV) and Node (NODE_ENV).

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.