pherval / webpack-config-organizer

Webpack helper to organize your configurations, separating them by concerns.

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

webpack-config-organizer's Issues

ignore falsy values or empty strings

Must be ignored

module.exports = organizer([""], {
  target: "node",
  externalsPresets: { node: true },
  externals: [nodeExternals()],
});

Given:

b [Error]: Webpack build tools: Webpack configuration <path>webpack/presets/webpack. not found

Dont't load environment preset by default

[webpack-cli] b [Error]: Webpack build tools: Webpack configuration <path>/webpack/env/webpack.production not found