jedireza/aqua

Upgrade webpack

Closed this issue · 2 comments

Webpack v2 is current (as of 3/30/17). Let's get it upgraded.

Wanted to share my updatedgulp/webpack.js to use webpack@2.3.x.
Also, I used eslint-loader@1.7.x to lint my code on the fly and happypack@3.0.x to improve webpack build speed in 2-3x times.

'use strict';
const Gulp = require('gulp');
const Gutil = require('gulp-util');
const Webpack = require('webpack');
const Path = require('path');
const HappyPack = require('happypack');


let executionCount = 0;


Gulp.task('webpack', (callback) => {

    const plugins = [
        new Webpack.optimize.CommonsChunkPlugin({
            name: 'core',
            filename: 'core.min.js',
            minChunks: 2
        }),
        new Webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: `"${process.env.NODE_ENV}"`
            }
        }),
        new HappyPack({
            id: 'jsx',
            threads: 4,
            loaders: [
                'babel-loader?presets[]=es2015&presets[]=react'
            ]
        })
    ];

    let devtool = 'source-map';

    if (process.env.NODE_ENV === 'production') {
        plugins.push(new Webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: false
        }));

        devtool = '';
    }

    const config = {
        watch: !global.isBuild,
        entry: {
            'pages/account': './client/pages/account/index',
            'pages/admin': './client/pages/admin/index',
            'pages/contact': './client/pages/contact/index',
            'pages/login': './client/pages/login/index',
            'pages/signup': './client/pages/signup/index'
        },
        output: {
            path: Path.resolve(__dirname, '../public'),
            filename: '[name].min.js',
            sourceMapFilename: '[name].map.js'
        },
        resolve: {
            extensions: ['.js', '.jsx']
        },
        module: {
            rules: [
                {
                    enforce: 'pre',
                    test: /\.jsx?$/, // both .js and .jsx
                    exclude: /node_modules/,
                    loader: 'eslint-loader',
                    options: {
                        emitError: true,
                        emitWarning: true
                    }
                },
                {
                    test: /\.jsx?$/, // both .js and .jsx
                    include: [
                        Path.resolve(__dirname, '../client')
                    ],
                    loader: 'happypack/loader?id=jsx'
                }
            ]
        },
        devtool,
        plugins
    };

    Webpack(config, (err, stats) => {

        if (err) {
            throw new Gutil.PluginError('webpack', err);
        }

        Gutil.log('[webpack]', stats.toString({
            colors: true,
            chunkModules: false
        }));

        if (executionCount === 0) {
            callback();
        }

        executionCount += 1;
    });
});

Thanks for sharing @symbianm.