webpack.config.js

/*! webpack.config.js | Build JS and CSS client assets */

'use strict';

var webpack       = require('webpack');
var CleanWP       = require('clean-webpack-plugin');
var ExtractTextWP = require('extract-text-webpack-plugin');
var ModernizrWP   = require('modernizr-webpack-plugin');
var HtmlWP        = require('html-webpack-plugin')

var path      = require('path');
var env       = process.env.NODE_ENV || 'development';
// var task      = process.env.npm_lifecycle_event;
var moment    = require('moment');
var now       = moment(new Date());
var titleCase = require('title-case');

var pkg  = require('./package');
var dirs = pkg.root;

/* ----------------------------------- *\
    Options
\* ----------------------------------- */

var options = {

    postcss: {
        cssnext: {
            // Browsers list, specify your browser scope.
            browsers: [ '> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1', 'ie >= 9' ],

            // PostCSS plugins options included in `postcss-cssnext`
            features: {
                customProperties: {
                    // Add custom css variables
                    variables: {},
                    preserve: false
                }
            }
        }
    },

    cssnano: {
        autoprefixer: false
    },

    uglifyjs: {
        mangle: {
            // Avoids mangling specific variable names
            except: ['require', 'exports', '$']
        }
    },

    imagemin: {
        progressive: true,
        optimizationLevel: 5,
        interlaced: false,
        pngquant: {
            quality: '65-90',
            speed: 4
        }
    },

    banner: [
        now.format('YYYY-MM-DD'),
        titleCase(pkg.name),
        '@version ' + pkg.version,
        '@author ' + pkg.author,
        '@license ' + pkg.license,
        'Copyrights (c) 2015'
    ].join('\n')

}; // end of options

/* ----------------------------------- *\
    Webpack settings
\* ----------------------------------- */

var webpackConfig = {

    // Switch loaders to debug mode
    debug: env === 'development',

    // Enable source maps to make debugging easier
    devtool: 'source-map',

    // The base directory for resolving the entry option
    context: path.resolve(__dirname, dirs.src),

    // The entry point for the bundle(s)
    entry: {
        jquery: ['jquery'],
        app: ['./scripts/app.js', './styles/app.css']
    },

    // Options affecting the output
    output: {
        path: path.resolve(__dirname, dirs.out),
        filename: 'assets/js/[name]' + (env === 'development' ? '' : '.' + pkg.version + '.min') + '.js'
    },

    // Options affecting the normal modules
    module: {
        // Array of automatically applied loaders
        loaders: [
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: ExtractTextWP.extract(
                    'style-loader',
                    'css-loader?'+JSON.stringify(options.cssnano)+'!postcss-loader',
                    { publicPath: '../' }
                )
            },
            {
                test: /.*\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    'file-loader?name=assets/img/[name].[ext]',
                    'image-webpack?'+JSON.stringify(options.imagemin)
                ]
            }
        ]
    },

    // ESLint options
    eslint: {
        configFile: '.eslintrc'
    },

    // PostCSS plugins configuration
    postcss: function(files) {
        return [
            // Use the latest CSS syntax today
            require('postcss-cssnext')(options.postcss.cssnext),

            // Fractional grid system built with `calc()`
            require('lost')(),

            // Replace easing names to `cubic-bezier()`
            require('postcss-easings')(),

            // Write SVGs directly in CSS
            require('postcss-write-svg')(),

            // Log PostCSS messages in the console.
            require('postcss-reporter')()
        ];
    },

    // Add additional plugins to the compiler
    plugins: [
        // Skips the emitting phase when there are errors while compiling
        new webpack.NoErrorsPlugin(),

        // Clean build folder(s) before building
        new CleanWP([
            path.resolve(__dirname, dirs.out, 'assets')
        ]),

        // Extract the vendor libraries from a script into a separate
        new webpack.optimize.CommonsChunkPlugin('jquery', 'assets/js/libs/jquery' + (env === 'development' ? '' : '.min') + '.js'),

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),

        // new ModernizrWP({
        //     filename: 'assets/js/libs/modernizr-custom.js',
        //     noChunk: true,
        //     htmlWebpackPlugin: true
        // }),

        // Moves CSS into a separate output file
        new ExtractTextWP('assets/css/[name]' + (env === 'development' ? '' : '.' + pkg.version + '.min') + '.css', {
            allChunks: true
        }),

        // Search for equal or similar files and deduplicate them in the output
        new webpack.optimize.DedupePlugin(),

        // Add banner to file(s)
        new webpack.BannerPlugin(options.banner, {
            entryOnly: true
        }),

        new HtmlWP()
    ]

}; // end of webpackConfig

// Add UglifyJs (options) to the compiler, if `NODE_ENV=production`
if (env === 'production') {
    webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin(options.uglifyjs));
}

module.exports = webpackConfig;