webpack.config.js

var webpack = require('webpack');
var fs = require('fs');
var path = require('path');
var _ = require('lodash');

var CleanPlugin = require('clean-webpack-plugin');
var StatsPlugin = require('stats-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackErrorNotificationPlugin = require('webpack-error-notification');

var wxConfig = fs.existsSync('.config.json') ? require('./.config.json') : {};
var env = _.get(process.env, 'NODE_ENV', _.get(wxConfig, 'env', 'live'));
var debug = _.get(wxConfig, 'debug', env === 'dev');

var nodeModulesDir = path.resolve(__dirname, 'node_modules');
var bowerComponentsDir = path.resolve(__dirname, 'bower_components');
var publicDir = path.resolve(__dirname, 'www');
var publicAssetsDir = path.resolve(publicDir, 'assets');
var assetsDir = path.resolve(__dirname, 'assets');

var nodeModule = _.partial(path.join, nodeModulesDir);
var bowerComponent = _.partial(path.join, bowerComponentsDir);
var script = _.partial(path.join, assetsDir, 'scripts');

var modulesRegex = /\/(web_modules|node_modules|bower_components)\//;

var autoprefixerLoader = 'autoprefixer?' + JSON.stringify({browsers:['> 1%', 'last 2 versions', 'Firefox ESR', 'IE >= 7']});
var cssLoader = 'css?' + JSON.stringify({sourceMap: false, root: publicDir});

const webpackMerge = _.partialRight(_.assign, function(a, b) {
    if(_.isArray(a) && _.isArray(b)) {
        return b.concat(a);
    }
    if(_.isPlainObject(a) && _.isPlainObject(b)) {
        return webpackMerge(a, b);
    }
    return b;
});

var webpackConfig = {
    target: 'web',
    context: __dirname,
    entry: {
        bundle: [
            //'webpack-dev-server/client?http://localhost:8080/assets/',
            //'webpack/hot/only-dev-server',
            path.join(__dirname, 'assets/index'),
        ],
    },
    output: {
        path: publicAssetsDir,
        filename: '[name]-[hash].js',
        chunkFilename: 'chunk-[chunkhash].js',
        pathinfo: env === 'dev', // Include comments with information about the modules.
        publicPath: '/assets/'
    },
    resolve: {
        //root: [assetsDir, nodeModulesDir, bowerComponentsDir],
        modulesDirectories: ['web_modules','node_modules','bower_components'],
        alias: {
            'jquery.ui.widget': nodeModule('jquery-ui/widget.js'),
            'jquery': nodeModule('jquery/src/jquery.js'),
            'jquery.expander': bowerComponent('jquery.expander/jquery.expander.js'),
            //select2: script('lib/select2.js'), // Because https://github.com/select2/select2/issues/1304#issuecomment-26752080
            'jquery-migrate': nodeModule('jquery-migrate/src/migrate.js'),
            json2: bowerComponent('json2/json2.js'),
            regenerator: nodeModule('regenerator/runtime-module.js'),
        },
        extensions: ['.jsx','.js','.less','.css',''],
    },
    node: {
        __filename: true,
        __dirname: true,
        fs: "empty"
    },
    debug: debug,
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: modulesRegex,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-1', 'react'],
                    compact: false,
                }
            },
            {
                test: /\.js$/,
                exclude: modulesRegex,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-1'],
                    plugins: ['syntax-flow', 'transform-flow-strip-types'],
                    compact: false,
                }
            },
            {
                test: require.resolve('jquery/src/selector.js'),
                loader: 'amd-define-factory-patcher',
            },
            {
                test:   /\.less$/,
                loader: ExtractTextPlugin.extract('style', [cssLoader, autoprefixerLoader, 'less?strictMath&strictUnits']),
                //loaders: ['style',cssLoader,autoprefixerLoader,'less?strictMath&strictUnits'],
                //exclude: modulesRegex,
            },
            {
                test:   /\.css$/,
                //loaders: ['style',cssLoader,autoprefixerLoader],
                loader: ExtractTextPlugin.extract('style', [cssLoader, autoprefixerLoader]),
                //exclude: modulesRegex,
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url?limit=2048&name=[name]-[sha1:hash:hex:10].[ext]', // Inline images if they're less than 2 KiB
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff2?)(\?\w+)?$/i,
                loaders: [
                    'file?name=[name]-[sha1:hash:hex:10].[ext]',
                ]
            },
            {
                // https://en.wikipedia.org/wiki/HTML_Components
                test: /\.htc$/,
                loaders: [
                    'file?name=[name]-[sha1:hash:hex:10].[ext]',
                ]
            }
        ],
    },
    plugins: [
        //new webpack.HotModuleReplacementPlugin(),
        new WebpackErrorNotificationPlugin(),
        new CleanPlugin([publicAssetsDir]),
        new ExtractTextPlugin('bundle-[contenthash].css'),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            //'window.jQuery': 'jquery',
            //'window.$': 'jquery',
            timezoneJS: 'timezone-js',
            React: 'react',
            regeneratorRuntime: 'regenerator',
            _: 'lodash',
            //ReactDOM: 'react/lib/ReactDOM',
            //ReactDOMServer: 'react/lib/ReactDOMServer',
            //'_.string': 'underscore.string',
            //define: 'requirejs',
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'bundle',
            children:  true, // Look for common dependencies in all children
            minChunks: 5, // How many times a dependency must come up before being extracted
            //filename: path.join(publicJsDir, '/vendor.bundle.js')
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(env === 'live' || env === 'ie' ? 'production' : env), // Every other lib expects "live" to be called "production". In particular, this will make React smaller
            },
        }),
        new StatsPlugin(path.relative(publicAssetsDir, './webpack.stats.json'), {
            hash: false,
            version: false,
            timings: false,
            assets: true,
            chunks: false,
            chunkModules: false,
            modules: false,
            cached: true,
            reasons: false,
            source: false,
            errorDetails: false,
            chunkOrigins: false,
        }),
        new webpack.NoErrorsPlugin(),
    ]
};

switch(env) {
    case 'dev':
        webpackConfig.devtool = debug ? 'source-map' : 'eval';
        break;
    case 'ie':
        // This might make it a smidgin easier to debug Internet Explorer
        webpackConfig.devtool = false;
        webpackConfig.plugins.push(
            new webpack.optimize.UglifyJsPlugin({
                output: {
                    beautify: true,
                    comments: true,
                    screw_ie8: false,
                },
                compress: {
                    booleans: false,
                    cascade: false,
                    conditionals: false,
                    dead_code: true,
                    drop_debugger: true,
                    hoist_funs: false,
                    hoist_vars: true,
                    if_return: false,
                    join_vars: false,
                    loops: false,
                    negate_iife: false,
                    properties: false,
                    screw_ie8: false,
                    sequences: false,
                    unused: true,
                    warnings: false,
                },
                mangle: false,
            })
        );
        break;
    default:
    case 'demo':
    case 'live':
    case 'production':
        webpackConfig.devtool = 'source-map';
        webpackConfig.plugins.push(
            new webpack.optimize.UglifyJsPlugin({
                output: {
                    screw_ie8: false,
                },
                compress: { // http://lisperator.net/uglifyjs/compress, http://davidwalsh.name/compress-uglify
                    //sequences: !debug,
                    //booleans: !debug,
                    //conditionals: !debug,
                    //hoist_funs: false,
                    //hoist_vars: debug,
                    warnings: false,
                    drop_console: !debug,
                    screw_ie8: false,
                },
                mangle: {
                    screw_ie8: false,
                }
            }),
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.optimize.DedupePlugin()

            // These can't be enabled until this is resolved: https://github.com/webpack/extract-text-webpack-plugin/issues/115
            //new webpack.optimize.MinChunkSizePlugin({minChunkSize:10240})
            //new webpack.optimize.AggressiveMergingPlugin({
            //    minSizeReduce: 1.25,
            //})
        );
        break;
}


module.exports = webpackConfig;