Helps to load, extend and merge webpack configs
Clone or download

README.md

NPM version Travis build status AppVeyor build status Code Climate Maintainability Code Climate Coverage Dependency Status Development Dependency Status Greenkeeper badge

webpack-config

Helps to load, extend and merge webpack configs

Installation

npm install webpack-config --save-dev

or

yarn add webpack-config --dev

Features

  • #extend() - Helps to extend config using local file or shareable config
  • #merge() - Helps to merge some values into config and overrides existing ones
  • #defaults() - Helps to add some values if they are missing
  • Supports environment variables under #extend(), #merge(), #defaults() methods
  • Supports process.env.* variables in addition to environment ones
  • Supports shareable configs via node-modules

Changelog

Details changes for each release are documented in the release notes and also in the wiki page.

Shareable Configs

You can publish your configs to npm using webpack-config- prefix for package name.

When you call #extend() method you may omit that prefix:

import Config from "webpack-config";

export default new Config().extend(
  "mdreizin/base",
  "mdreizin/css",
  "mdreizin/html",
  "webpack-config-mdreizin/json"
  // etc
);

Also I would recommend to add webpack and webpack-config keywords so other users can easily find your module.

Usage

./webpack.config.js

import Config, { environment } from "webpack-config";

environment.setAll({
  env: () => process.env.NODE_ENV
});

// Also you may use `'conf/webpack.[NODE_ENV].config.js'`
export default new Config().extend("conf/webpack.[env].config.js");

./conf/webpack.base.config.js

import ExtractTextPlugin from "extract-text-webpack-plugin";
import Config from "webpack-config";

const extractCss = new ExtractTextPlugin("[name].css");

export default new Config().merge({
  output: {
    filename: "[name].js"
  },
  resolve: {
    root: [__dirname],
    modulesDirectories: ["node_modules"]
  },
  plugins: [extractCss],
  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: extractCss.extract("style", ["css", "less"])
      }
    ]
  }
});

./conf/webpack.development.config.js

import webpack from "webpack";
import Config from "webpack-config";

export default new Config().extend("conf/webpack.base.config.js").merge({
  debug: true,
  devtool: "#source-map",
  output: {
    pathinfo: true
  },
  entry: {
    app: ["src/index.js", "src/index.less"],
    vendor: ["lodash"]
  },
  plugins: [new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js")]
});

./conf/webpack.production.config.js

import webpack from "webpack";
import Config from "webpack-config";

export default new Config()
  .extend({
    "conf/webpack.development.config.js": config => {
      delete config.debug;
      delete config.devtool;
      delete config.output.pathinfo;

      return config;
    }
  })
  .merge({
    plugins: [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(true),
      new webpack.optimize.UglifyJsPlugin({
        mangle: true,
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      })
    ]
  });