Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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


Helps to load, extend and merge webpack configs


npm install webpack-config --save-dev


yarn add webpack-config --dev


  • #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


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(
  // etc

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



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

  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");


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"])


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")]


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

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

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