Utilities to help your webpack config be easier to read

Package: webpack-config-utils

Created by: kentcdodds

Last modified: Tue, 28 Jun 2022 23:46:28 GMT

Version: 2.3.1

License: MIT

Downloads: 24,877

Repository: https://github.com/kentcdodds/webpack-config-utils

Install

npm install webpack-config-utils

yarn add webpack-config-utils

webpack-config-utils

Utilities to help your webpack config be easier to read

The problem

Webpack configuration is a JavaScript object which is awesomely declarative. However, often the webpack config file is
can easily turn into an imperative mess in the process of creating the configuration object.

This solution

The goal of this project is to provide utilities to make it easier to compose your config object so it's easier for
people to read. It has some custom methods and also comes bundled with some other projects to expose some helpful
utility functions.

Installation

This module is distributed via npm which is bundled with node and should
be installed as one of your project's devDependencies:

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

Usage

It is expected that you use this in your webpack.config.js file.

Protip: You can name your config file webpack.config.babel.js and
it'll be automagically transpiled! (Make sure you have
babel-register installed.) So you could use ES6 module imports
rather than CommonJS requires. But this example will stick to
CommonJS because we love you ❤️

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

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

module.exports = {
  // ... your config
  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'),
  },
  module: {
    rules: [
      {
        test: /\.(sc|c)ss$/,
        exclude: /node_modules/,
        use: removeEmpty([
          ifProduction(MiniCssExtractPlugin.loader),
          ifNotProduction({loader: 'style-loader', options: {sourceMap: true}}),
          {loader: 'css-loader', options: {sourceMap: true}},
          {loader: 'postcss-loader', options: {sourceMap: true}},
          {loader: 'sass-loader', options: {sourceMap: true}},
        ]),
      },
  },
  plugins: removeEmpty([
    ifProduction(
      new MiniCssExtractPlugin({
        filename: 'css/[id].[contenthash].css',
      })
    ),
    ifProduction(new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',
      },
    })),
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: 'head',
    }),
    ifProduction(new OfflinePlugin()),
  ]),
}

Then you'd invoke the webpack config with cross-env in your package.json scripts (or with
nps):

 {
  // your package.json stuff
  scripts: {
    "build:dev": "cross-env NODE_ENV=development webpack",
    "build:prod": "cross-env NODE_ENV=production webpack"
  }
}

Things get even better with webpack 2+ because you can write your webpack config as a function that accepts an env
argument which you can set on the command line (which means you don't need cross-env 👍).

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

module.exports = env => {
  const {ifDev} = getIfUtils(env)
  return {
    output: {
      // etc.
      pathinfo: ifDev(),
      path: resolve(__dirname, 'dist'),
    },
    // etc.
  }
}

API

See the API Documentation here. In addition to custom utilities from this package, it comes bundled with
a few another helpful utility: webpack-combine-loaders (exposed as combineLoaders).