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!