webpack-config-utils

The Problem

Declarative configuration is great but the learning cost is high for the majority of folk. Sometimes you just want to create a webpack config with a few options and then sprinkle on a few settings.

The Solution

Webpack config util offers 2 methods to create the perfect config:

🛠 Create Config:

We expose a function createConfig which is what you'll need to create a ready-to-go config.

Its options are intuitive yet support a wide range of scenarios including node/web, dev servers or even logging of emitted bundle sizes

Full list of options here

🩹 Plugins:

A grab bag of imperative "plugins" that understand the config they're operating on. Just stack them up according to your use case

We have found for our projects this really helps with auditing what it is we want our bundler to actually do for us. It's far too easy for codebases and bundler configs to get out of sync

The plugins are also compatible with next plugins although tend to be a little lower level

Installation

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

yarn add -D @peartree/webpack-config-util

Usage

This example uses typescript configuration but feel free to use a webpack.config.js file

// webpack.config.ts
import {plugins, getDevPackagesPaths, compose, createConfig} from '@peartree/webpack-config-util'

const composedPlugins = compose(
  plugins.mainFields(['ts', 'tsx', 'js']),
  plugins.whitelistAllPackages(),
)

const config = composedPlugins(createConfig({}))

export default config

Again, this assumes a webpack.config.ts. For JS configs, drop the TS_NODE_FILES env

// package.json
{
  ...
  "scripts": {
    "dev": "NODE_ENV=development TS_NODE_FILES=true build-webpack-development --verbose",
    "build": "NODE_ENV=production TS_NODE_FILES=true build-webpack-production"
  }
}

Command line docs are here

Options

parameter	web/node	default	type	description
nodeBundle	node	index	string	the name of the bundle file
buildDir	node	dist	string	where the bundle will be output to
host	node	localhost	string	where the bundle will be output to
port	node	3000	number	where the bundle will be output to
serverEntryPoint	web & node	(src/)index.js	string	entry point relative to ./src directory
hotModuleReplacement	web	true	boolean	whether to apply the hot module replacement plugin
mode	web & node	required	'development' or 'production'	defines whether webpack will operate in dev mode. Note this is distinct from NODE_ENV
target	web & node	required	'web' or 'node'	defines the target platform target

Command Line

parameter	description
verbose	logs the full config to the console

Plugins

TBD. You can check them all here

Contributing

This package is part of a monorepo. Please see here for details of how to contribute.

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