Skip to content
This repository has been archived by the owner on Jun 18, 2019. It is now read-only.

Fitbit/webpack-config

Folders and files

NameName
Last commit message
Last commit date
Sep 20, 2016
May 30, 2016
Oct 21, 2016
Sep 20, 2016
Aug 4, 2016
Jun 16, 2016
Oct 8, 2015
May 27, 2016
May 27, 2016
Jul 7, 2016
May 31, 2016
May 27, 2016
Jun 30, 2016
Dec 5, 2014
Sep 20, 2016
Jun 13, 2016
Oct 20, 2016
Nov 24, 2015
May 27, 2016
Oct 21, 2016
Aug 4, 2016

Repository files navigation

NPM version Travis build status AppVeyor build status Code Climate GPA Code Climate Coverage Dependency Status Development Dependency Status

webpack-config

> Helps to load, extend and merge webpack configs

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.

Samples

./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({
    filename: __filename,
    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({
    filename: __filename,
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(true),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            output: {
                comments: false
            },
            compress: {
                warnings: false
            }
        })
    ]
});