webpack-config-utils

2.3.1 verified Sat Apr 25 auth: no javascript

Utilities to make webpack configuration objects easier to compose and read. Current stable version is 2.3.1. The package provides helper functions like getIfUtils, removeEmpty, and props to conditionally include parts of the config based on environment. It differentiates from plain webpack config by reducing conditional logic and removing empty entries. Last release was in 2016; no further development. Works with webpack 1, 2, and 3.

Common errors

error TypeError: getIfUtils is not a function ↓

cause Importing incorrectly or destructuring from wrong source.

fix

Use const { getIfUtils } = require('webpack-config-utils');

error Cannot find module 'webpack-config-utils' ↓

cause Package not installed.

fix

Run npm install --save-dev webpack-config-utils

error Unhandled rejection: TypeError: Cannot read property 'production' of undefined ↓

cause Passing undefined or wrong argument to getIfUtils.

fix

Ensure process.env.NODE_ENV is set or pass a valid string.

Warnings

breaking v2.0.0 removed the 'here' export. ↓

fix Do not use 'here' from this package; use path.resolve instead.

deprecated The package is no longer maintained; last release in 2016. ↓

fix Consider alternatives like webpack-merge or webpack-chain for more comprehensive config management.

gotcha getIfUtils expects a string or object with keys, not an env from --env; with webpack 2+, pass env directly. ↓

fix Use getIfUtils(env) where env is the object from CLI --env flags.

gotcha removeEmpty only removes undefined and null, not empty strings or arrays. ↓

fix Manually filter or use a different helper if you need to remove empty strings.

Install

npm install webpack-config-utils

yarn add webpack-config-utils

pnpm add webpack-config-utils

Imports

getIfUtils

wrong

import { getIfUtils } from 'webpack-config-utils'

correct

const { getIfUtils } = require('webpack-config-utils')

CommonJS only; does not support ESM imports.

removeEmpty

wrong

const removeEmpty = require('webpack-config-utils').removeEmpty

correct

const { removeEmpty } = require('webpack-config-utils')

Both work, but destructuring is idiomatic.

props

wrong

const props = require('webpack-config-utils/props')

correct

const { props } = require('webpack-config-utils')

Props is exported as a named export from the main entry.

Quickstart

Shows how to use getIfUtils and removeEmpty to conditionally configure a webpack config based on NODE_ENV.

const { getIfUtils, removeEmpty } = require('webpack-config-utils');
const webpack = require('webpack');

const { ifProduction, ifNotProduction } = getIfUtils(process.env.NODE_ENV);

module.exports = {
  mode: ifProduction('production', 'development'),
  entry: removeEmpty({
    app: ifProduction('./indexWithoutCSS', './indexWithCSS'),
    css: ifProduction('./style.scss')
  }),
  output: {
    chunkFilename: ifProduction('js/[id].[contenthash].js', 'js/[name].js'),
    filename: ifProduction('js/[id].[contenthash].js', 'js/[name].js'),
  },
  plugins: removeEmpty([
    ifProduction(new webpack.DefinePlugin({
      'process.env': { NODE_ENV: '"production"' }
    }))
  ])
};