Webpack 2.x configuration

package.json

{
    "name": "",
    "version": "1.0.0",
    "main": "gulpfile.js",
    "dependencies": {

    },
    "devDependencies": {
        "susy": "^2.2.6",
        "less": "*",
        "raw-loader": "*",
        "css-loader": "*",
        "file-loader": "*",
        "node-sass": "*",
        "sass-loader": "*",
        "scss-loader": "*",
        "less-loader": "*",
        "style-loader": "*",
        "imports-loader": "*",
        "exports-loader": "*",
        "expose-loader": "*",
        "url-loader": "*",

        "babel-loader": "^v7.0.0-beta.1",
        "babel-core": "*",
        "babel-preset-env": "*",
        "babel-plugin-transform-runtime": "*",

        "webpack": "*",
        "debug": "*",
        "copy-webpack-plugin": "*",
        "progress-bar-webpack-plugin": "*",
        "bower-resolve-webpack-plugin": "*",
        "extract-text-webpack-plugin": "*",
        "uglify-js": "*"
    }
}

webpack.config.js

const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

const BowerResolvePlugin = require('bower-resolve-webpack-plugin');

/**
 * Public resources path
 */
const resourcesPath = '/dist';

/**
 * The root path to the assets.
 *
 * @type {String}
 */
const sourcePath = __dirname + '/resources/assets';

/**
 * The path where the scripts should be written.
 *
 * @type {String}
 */
const destinationPath = __dirname + '/public';

const bowerPackagesPath = __dirname + '/bower_components';

const nodePackagesPath = __dirname + '/node_modules';

// detect if webpack bundle is being processed in a production or development env
var isDevelopmentMode = !(require('yargs').argv.p || false);

module.exports = {
    context: sourcePath + '/js/app',
    entry: {
        front: sourcePath + '/front.entry',
        admin: sourcePath + '/admin.entry'
    },
    output: {
        path: destinationPath + resourcesPath,
        filename: 'js/[name].js'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins: ['transform-runtime'],
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /\.jsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react'],
                        plugins: ['transform-runtime'],
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                }),
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!less-loader'
                }),
            },
            {
                test: /\.(scss|sass)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader'
                }),
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        publicPath: resourcesPath,
                        name: '/fonts/[name].[ext]'
                    }
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        publicPath: resourcesPath,
                        name: '/images/[name].[ext]'
                    }
                }
            },
            /**
             * expose jQuery to a global namespace
             */
            {
                test: /jquery\.js$/,
                use: [
                    { loader: 'expose-loader', query: 'jQuery' },
                    { loader: 'expose-loader', query: '$' }
                ]
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            __DEBUG__: JSON.stringify(isDevelopmentMode)
        }),

        new ProgressBarPlugin(),

        new ExtractTextPlugin('css/[name].css'),

        new CopyWebpackPlugin([
            { from: sourcePath + '/images', to: destinationPath + '/images', toType: 'dir', force: true }
        ]),

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

        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/common.js'
        })
    ],

    resolve: {
        plugins: [
            new BowerResolvePlugin()
        ],

        modules: [
            sourcePath + '/js',
            sourcePath + '/js/vendor',
            bowerPackagesPath,
            nodePackagesPath
        ],
        descriptionFiles: ['bower.json', 'package.json'],
        mainFields: ['browser', 'main'],
        alias: {
            app: sourcePath + '/js/app',
            system: sourcePath + '/js/system',
            components: sourcePath + '/js/system/components',
            plugins: sourcePath + '/js/system/plugins',
            utils: sourcePath + '/js/system/utils',
            style: sourcePath + '/css',

            '__bower': bowerPackagesPath,
            '__node' : nodePackagesPath
        }
    },

    cache: true
}