webpack.config.js

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

'use strict';

var webpack       = require('webpack');
var ExtractTextWP = require('extract-text-webpack-plugin');
var HtmlWP        = require('html-webpack-plugin');

var path      = require('path');
var moment    = require('moment');
var now       = moment(new Date());
var titleCase = require('title-case');

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

// Depending on `-p` flag, optimize for production
var production = process.argv.indexOf('-p') > -1;

/* --------------------------------------------------------------------- *\
    PROJECT OPTIONS
\* --------------------------------------------------------------------- */

var options = {

    /* -------------------------------- *\
        PostCSS
    \* -------------------------------- */

    // PostCSS plugins options
    postcss: {
        // @see: cssnext.io/usage
        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
                }
            }
        },
        // @see github.com/corysimmons/lost
        lost: {},
        // @see github.com/postcss/postcss-easings
        easings: {},
        // @see github.com/jonathantneal/postcss-write-svg
        writesvg: {},
        // @see github.com/jonathantneal/mdcss
        mdcss: {
            destination: path.join(pkg.root.out, 'styleguide')
        },
        // @see github.com/jonathantneal/postcss-font-magician
        fontmagician: {
            hosted: path.resolve(__dirname, pkg.root.src, 'fonts')
        }
    },

    /* -------------------------------- *\
        Optimization
    \* -------------------------------- */

    // @see cssnano.co/options
    cssnano: {
        autoprefixer: false
    },

    // @see github.com/mishoo/UglifyJS2
    uglifyjs: {
        mangle: {
            // Avoids mangling specific variable names
            except: ['require', 'exports', '$']
        }
    },

    // @see npmjs.com/package/image-webpack-loader#imagemin-options
    imagemin: {
        progressive: true,
        optimizationLevel: 5,
        interlaced: false,
        pngquant: {
            quality: '65-90',
            speed: 4
        }
    },

    /* -------------------------------- *\
        Banner
    \* -------------------------------- */

    // A string, it will be wrapped in a comment
    banner: [
        now.format('YYYY-MM-DD'),
        titleCase(pkg.name),
        '@version ' + pkg.version,
        '@author ' + pkg.author,
        '@license ' + pkg.license,
        'Copyrights (c) 2015'
    ].join('\n')

};

/* --------------------------------------------------------------------- *\
    WEBPACK CONFIGURATION
\* --------------------------------------------------------------------- */

var webpackConfig = {

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

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

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

    // Define dependencies that should be resolved in the target environment
    externals: {
        // `require('jquery')` is external and available
        // on the global var jQuery
        'jquery': 'jQuery',
        // and for Modernizr
        'modernizr': "Modernizr"
    },

    // Options affecting the resolving of modules
    resolve: {
        // alias: {},
        modulesDirectories: ['node_modules', 'bower_components']
    },

    // Options affecting the normal modules
    module: {
        // Array of automatically applied preloaders
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ],

        // Array of automatically applied loaders
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextWP.extract(
                    'style-loader',
                    'css-loader?' + JSON.stringify(options.cssnano) + '!postcss-loader',
                    { publicPath: '../' }
                )
            },
            {
                test: /images\/.*\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    'file-loader?name=assets/img/[name].[ext]',
                    'image-webpack-loader?'+JSON.stringify(options.imagemin)
                ]
            },
            {
                test: /fonts\/.*\.(woff|woff2|ttf|eot|svg)([\?]?.*)$/i,
                loader: 'file-loader?name=assets/font/[name].[ext]'
            }
        ]
    },

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

    // PostCSS plugins configuration
    postcss: function(files) {
        return [
            // Resolve path of an `@import` rule
            require('postcss-import')({
                addDependencyTo: files
            }),

            // Use the latest CSS syntax today
            require('postcss-cssnext')(options.postcss.cssnext),

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

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

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

            // Flexbox polyfill
            require('postcss-flexibility')(),

            // Automatic @font-face
            require('postcss-font-magician')(options.postcss.fontmagician),

            // Nesting rules
            require('postcss-nesting')(),

            // Extend rules
            require('postcss-extend')(),

            // Mixins
            require('postcss-mixins')(),

            // Generate styleguides from CSS comments
            require('mdcss')(options.postcss.mdcss),

            // Log PostCSS messages in the console
            require('postcss-reporter')({
                clearMessages: true
            })
        ];
    },

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

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

        // Automatically loaded modules
        new webpack.ProvidePlugin({
            // Modernizr: 'modernizr',
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),

        // Assign the module and chunk ids by occurrence count
        new webpack.optimize.OccurenceOrderPlugin(true),

        // Define free variables
        // new webpack.DefinePlugin({
        //     'process.env': {
        //         BROWSER: JSON.stringify(true),
        //         NODE_ENV: JSON.stringify('development')
        //     }
        // }),

        // Prevents the inclusion of duplicate code
        new webpack.optimize.DedupePlugin(),

        // Adds a banner to the top of each generated chunk
        new webpack.BannerPlugin(options.banner, {
            entryOnly: true
        }),

        // Generates `index.html`
        new HtmlWP({
            title: titleCase(pkg.name),
            // @doc npmjs.com/package/html-minifier#options-quick-reference
            // minify: {}
        })

    ],

    // Configure the behaviour of `webpack-dev-server`
    devServer: {
        // Base path for the content
        contentBase: path.resolve(__dirname, pkg.root.out),
    },

    // Output options for the stats
    stats: {
        colors: true,
        modules: true,
        reasons: true
    },

    // Display a compilation progress to stderr
    progress: true

};

// Add UglifyJs (options) to the compiler, depending on `-p` flag
if (production) {
    webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin(options.uglifyjs));
}

module.exports = webpackConfig;