trc-client-core/config/webpack.config.js

The core of the TRC Client

var webpack = require('webpack');
var path = require('path');
var create = require('lodash/object/create');

//
// Loaders
//
var modules = [
    "trc-toyota-client",
    "trc-contractor-client",
    "trc-client-core",
    "bd-stampy",
    "bd-peanut",
    "reflux-immutable",
    "react-basic-carousel"
];

var nodeModulestransformRegex = new RegExp('node_modules\/(' + modules.join('|') + ')\/(?!node_modules)');
var transformRegex = new RegExp('(' + modules.join('|') + ')\/(?!node_modules)');

var BABEL_LOADER = {
    test: /\.jsx?$/,
    include: function(absPath) {
        return nodeModulestransformRegex.test(absPath) || transformRegex.test(absPath)
    },
    loader: 'babel',
    query: {
        presets: ['es2015', 'react'],
        plugins: ['transform-object-rest-spread']
    }
};
var JSON_LOADER = {
    test: /\.json$/,
    loader: 'json-loader'
};
var YAML_LOADER = {
    test: /\.yml$/,
    loader: 'json-loader!yaml-loader'
};
var MARKDOWN_LOADER = {
    test: /\.md$/,
    loader: "json!yaml-frontmatter-loader"
};

var ENTRY_POINTS = {
    login: path.resolve('client/entryPoint/login.jsx'),
    main: [
        'babel-polyfill',
        path.resolve('client/entryPoint/main.jsx')
    ]
};

var HOT_MIDDLEWARE_ENTRY_POINT = 'webpack-hot-middleware/client';


//
// Development/base configuration
//
var development = {
    devtool: 'eval',
    cache: true,
    entry: {
        main: [HOT_MIDDLEWARE_ENTRY_POINT].concat(ENTRY_POINTS.main),
        login: ENTRY_POINTS.login
    },
    output: {
        path: path.resolve('public/bundles/'),
        filename: "[name].bundle.js",
        publicPath: '/public/bundles/'
    },
    resolve: {
        // Fallback that is relative to the config/webpack.config.js file
        // Should only apply if modules are being symlinked for development
        fallback: path.resolve(__dirname, '../../'),
        extensions: ['', '.js', '.jsx', '.md']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({'process.env': {NODE_ENV: '"development"'}})
    ],
    module: {
        loaders: [
            create(BABEL_LOADER, {
                query: {
                    presets: ['es2015', 'react'],
                    plugins: [
                        'transform-object-rest-spread',
                        ['react-transform', {
                            transforms: [{
                                transform: 'react-transform-hmr',
                                imports: ['react'],
                                locals: ['module']
                            }]
                        }]
                    ]
                }
            }),
            JSON_LOADER,
            YAML_LOADER,
            MARKDOWN_LOADER
        ]
    },
    eslint: {
        configFile: '.eslintrc',
        formatter: require('eslint-simple-formatter')
    },
    externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
        'vimeo-froogaloop': '$f'
    }
};


//
// Production config
// Extends the development options and then tweaks some things
//
// Uglyfies and merges components
// Uses the extract text plugin to serve uninlined css
// Minifies css and packs medai queries together
// Uses the external builds for core libraries
//
var production = create(development, {
    devtool: undefined,
    cache: false,
    entry: ENTRY_POINTS,
    plugins: [
        new webpack.BannerPlugin('"use strict";', {raw: true}),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.UglifyJsPlugin(),
        // new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin()
    ],
    module: {
        loaders: [
            BABEL_LOADER,
            JSON_LOADER,
            YAML_LOADER,
            MARKDOWN_LOADER
        ]
    },
    externals: {
        lodash: '_',
        immutable: 'Immutable',
        moment: 'moment',
        react: 'React',
        'react-dom': 'ReactDOM',
        'vimeo-froogaloop': '$f'
    }
});

module.exports = {
    development: development,
    production: production
};