example.webpack.base.conf.js

const webpack = require('webpack');
const path = require('path');
const isProduction = process.env.NODE_ENV === 'production';
const fs = require('fs');
const babelConfig = require('./babel.config');

//Root cartridge folder.
const cartridgePath = path.join(__dirname, 'cartridges', 'my_app', 'cartridge');
const modulesPath = path.join(__dirname, 'node_modules');

const jsEntryPoints = {
    app: './js/app',
    account: './js/account',
    styleguide: './js/styleguide',
    checkout: './js/checkout',
    stores: './js/stores',
    shoplanding: './js/shoplanding',
    home: './js/home'
};

module.exports = {
    context: cartridgePath,
    output: {
        filename: '[name].build.js',
        chunkFilename : '[name].chunk.js',
        path: path.join(cartridgePath, 'static', 'default', 'js', 'dist')
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                common: {
                    test: /[\\/]node_modules[\\/](jquery|hammerjs|react|react-dom)[\\/]/,
                    name: 'vendors',
                    chunks: 'initial',
                    enforce: true,
                    minChunks: 1,
                }
            }
        }
    },
    entry: jsEntryPoints,

    module: {
        rules: [
            {
                test: /\.modernizrrc$/,
                loader: 'modernizr-loader!json-loader'
            },
            {
                test: /\.js$/,
                exclude: /vendor|node_modules/,
                use: {
                    loader: 'babel-loader?cacheDirectory=true',
                    options: babelConfig
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'sass-variables-loader'
                ]
            },
            {
                test: /\.properties$/,
                loader: 'json-loader!@burton/localized-properties-loader'
            },
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            },
            {
                test: require.resolve('hammerjs'),
                use: {
                    loader: 'expose-loader',
                    options: 'hammer'
                }
            }
        ]
    },

    resolve: {
        alias: {
            hammer: 'hammerjs', // npm module is called hammerjs old imports go to hammer
            modernizr$: path.resolve(__dirname, '.modernizrrc')
        },
        modules: [
            'node_modules',
            'local_modules',
            'templates/resources',
            'scss'
        ],
        extensions: ['.js', '.json']
    },

    resolveLoader: {
        modules: [modulesPath]
    },

    plugins: [
        new webpack.DefinePlugin({
            __PRODUCTION: isProduction
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
    ]
};