webpack.config.js

'use strict';

require('webpack');

const CopyAssets = require('copy-webpack-plugin');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const os = require('os');
const path = require('path');
const runMode = require('run-mode');
const SaveAssetsJson = require('assets-webpack-plugin');
const StatsPlugin = require('stats-webpack-plugin');
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');

const environment = runMode.get();
const isDevEnvironment = environment === 'dev';
const isProdEnvironment = environment === 'prod';
const isStaticBuild = Boolean(process.env.BUILD_STATIC_ASSETS);
const isAnalyzingBundle = Boolean(process.env.ANALYZE_BUNDLE);

const statsPluginConfig = {
    assets: false,
    cached: false,
    children: false,
    chunks: true,
    chunkModules: false,
    chunkOrigins: false,
    errorDetails: false,
    hash: false,
    modules: false,
    reasons: false,
    source: false,
    timings: false,
    version: false
};

function getModifiedConfigFromBabelrc(esVersion) {
    const config = JSON.parse(fs.readFileSync('./.babelrc', 'UTF-8'));

    config.cacheDirectory = os.tmpdir();
    config.babelrc = false;

    if (esVersion === 5) {
        config.presets[0].push({
            modules: false,
            useBuiltIns: true,
            forceAllTransforms: true
        });
    }

    if (esVersion === 6) {
        config.presets[0].push({
            modules: false,
            useBuiltIns: true,
            targets: {
                browsers: ['Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15']
            }
        });
    }

    config.plugins[1][1].babelServer = false;

    return config;
}

function createConfig(esVersion) {
    const es = `es${esVersion}`;

    return {
        resolve: {
            extensions: ['.js', '.jsx'],
            mainFields: ['webpack', 'browser', 'web', 'browserify', 'main']
        },
        entry: {
            default: './client/index.js'
        },
        output: {
            path: path.join(__dirname, 'build', 'assets', es),
            publicPath: `public/assets/${es}/`,
            filename: isDevEnvironment ? '[name]-bundle.js' : '[name]-bundle-[contenthash].js',
            chunkFilename: isDevEnvironment ? '[name]-chunk.js' : '[name]-chunk-[contenthash].js'
        },
        mode: isDevEnvironment ? 'development' : 'production',
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: getModifiedConfigFromBabelrc(esVersion)
                    }
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: isDevEnvironment,
                                url: false,
                                minimize: isProdEnvironment
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: isDevEnvironment
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: isDevEnvironment
                            }
                        },
                        {
                            loader: 'sass-resources-loader',
                            options: {
                                resources: [
                                    './assets/styles/base/_base.scss',
                                    './assets/styles/bootstrap/_variables.scss',
                                    'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins.scss'
                                ]
                            }
                        }
                    ]
                },
                {
                    test: /\/react-leaflet-markercluster\/dist\/style\.min\.css$/,
                    use: 'null-loader'
                }
            ]
        },
        optimization: {
            runtimeChunk: {
                name: 'webpackRuntime'
            },
            minimizer: [
                new UglifyWebpackPlugin({
                    parallel: true,
                    uglifyOptions: {
                        mangle: {
                            safari10: true
                        }
                    }
                })
            ]
        },
        stats: {
            assetsSort: '!chunkNames'
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: isDevEnvironment ? '[name]-chunk.css' : '[name]-chunk-[contenthash].css'
            }),
            new SaveAssetsJson({
                path: isStaticBuild ? `build-static/assets/${es}/` : `build/assets/${es}/`,
                filename: 'assets.json'
            }),
            new CopyAssets([
                { from: 'assets/img/', to: '../img/' },
                { from: 'assets/manifest.json', to: 'manifest.json' },
                { from: 'assets/fonts/', to: '../fonts/' }
            ]),
            new StatsPlugin('stats.json', statsPluginConfig)
        ]
    };
}

const es5Config = createConfig(5);
const es6Config = createConfig(6);

const configs = isAnalyzingBundle ? [es6Config] : [es5Config, es6Config];

if (isStaticBuild) {
    configs.forEach(config => {
        config.entry.default = './static/client/index.js';
        config.output.path = config.output.path.replace('/build', '/build-static');
    });
}

if (isDevEnvironment) {
    configs.forEach(config => {
        config.devtool = 'eval';
    });
}

module.exports = configs;