Code Monkey home page Code Monkey logo

webpack-config's Introduction

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

webpack-config's People

Contributors

efueger avatar greenkeeper[bot] avatar greenkeeperio-bot avatar mdreizin avatar simenb avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.