Webpack config organizer

Webpack helper to organize your configurations separating them by concerns. This package achieves that by using two scope of files: presets and environments. Thereof you can define two types of files and both of them relies upon webpack --env CLI option. Environment configuration files help you define a config for different kinds of environments (dev, prod, debug, ci, and so on), while presets help you create predefined settings which help you to fast test a new build or just use make it cleaner.

Installation

Install using npm:

  npm install --save-dev webpack-config-organizer

Usage

First, you need to define a search path for your configs. You can use cosmiconfig to tell where to look for (package.json or .webpack-config-organizerrc.json):

// package.json
{
	"webpack-config-organizer": {
		"base": "path/to/your/env-and-presets-configs/", // relative to your project folder
		"environment": {
			"path": "/base/path/to/environment/configs/", // relative to "base"
			"prefix": "env-files-prefix"
		},
		"presets": {
			"path": "/base/path/to/presets/configs/", // relative to "base"
			"prefix": "presets-prefix"
		}
	}
}

On your webpack.config.js file use the tool to load your configurations:

const { organizer } = require("webpack-config-organizer")

module.exports = organizer({
    entry: "./src/main.js"
    output: {
        file: "[name].js"
    }
})

Using default presets

You can define default presets which are always loaded

const { organizer } = require("webpack-config-organizer")

module.exports = organizer(["typescript", "analyzer"], {
    entry: "./src/main.js"
    output: {
        file: "[name].js"
    }
})

Examples

Suppose you have the following configurations:

$ cd project-folder
$ ls build-tools/*

  build-tools/env:
  webpack.development.js
  webpack.debug.js
  webpack.ci.js

  build-tools/presets:
  webpack.typescript.js
  webpack.analyzer.js

and the given search parameters:

// package.json
{
	"webpack-config-organizer": {
		"base": "build-tools",
		"environment": {
			"path": "env",
			"prefix": "webpack."
		},
		"presets": {
			"path": "presets",
			"prefix": "webpack."
		}
	}
}

To load typescript and analyzer presets and debug environment:

$ npx webpack --env mode=debug --env.presets.typescript --env.presets.analyzer

Default presets

If you don't want to specify presets using the CLI, you can load them no matter what:

const { organizer } = require("webpack-config-organizer")

module.exports = organizer(["typescript", "analyzer"], {
    entry: "./src/main.js"
    output: {
        file: "[name].js"
    }
})

typescript and analzer presets will be always loaded:

$ npx webpack

Run Locally

Clone the project

  git clone https://github.com/pherval/webpack-config-organizer

Go to the project directory

  cd webpack-config-organizer

Install dependencies

  npm install

Build the application optionally

  npm run build

Running Tests

To run tests, run the following command

  npm t

License

MIT