Helps to load, extend and merge webpack configs

Downloads in past


7.5.06 years ago9 years agoMinified + gzip package size for webpack-config in KB


NPM version Travis build status AppVeyor build status Code Climate GPA 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


  • x #extend() - Helps to extend config using local file or shareable config
  • x #merge() - Helps to merge some values into config and overrides existing ones
  • x #defaults() - Helps to add some values if they are missing
  • x Supports environment variables under #extend(), #merge(), #defaults() methods
  • x Supports process.env.* variables in addition to environment ones
  • x 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: [
        modulesDirectories: [
    plugins: [
    module: {
        loaders: [{
            test: /\.less$/,
            loader: extractCss.extract('style', [

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: [
        vendor: [
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.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;
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(true),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            output: {
                comments: false
            compress: {
                warnings: false