webpack-config-utils
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/webpack-config-utils package

    2.3.1 • Public • Published

    webpack-config-utils

    Utilities to help your webpack config be easier to read

    Build Status Code Coverage Dependencies version downloads MIT License

    All Contributors PRs Welcome Donate Code of Conduct Roadmap Examples

    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).

    Articles

    Contributors

    Thanks goes to these people (emoji key):


    Kent C. Dodds

    💻 📖 💡 🚇 ⚠️

    Breno Calazans

    💡

    Tamara Temple

    📖

    Ben Halverson

    📖

    Huy Nguyen

    💻 📖 💡 ⚠️

    Ryan Johnson

    📝 📖

    Adam DiCarlo

    📖 🔧

    Jeremy Y

    📖

    This project follows the all-contributors specification. Contributions of any kind welcome!

    LICENSE

    MIT

    Keywords

    none

    Install

    npm i webpack-config-utils

    DownloadsWeekly Downloads

    6,719

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    218 kB

    Total Files

    34

    Last publish

    Collaborators

    • kentcdodds