silverstripe-webpack/webpack.config.js

/*
 * Production assets generation
 */
const webpack = require('webpack');
const commonVariables = require('./webpack.configuration');
const conf = commonVariables.configuration;
const { merge } = require('webpack-merge');
const common = require('./webpack.config.common.js');

const filesystem = require('fs');
const path = require('path');

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const UIInfo = require('./package.json');
const UIVERSION = JSON.stringify(UIInfo.version);
const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox-react/package.json');

const NODE_ENV = conf.NODE_ENV || process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false;

const IP = process.env.IP || conf.HOSTNAME;
const PORT = process.env.PORT || conf.PORT;

console.log('NODE_ENV: ' + NODE_ENV);
console.log('COMPRESS: ' + COMPRESS);
console.log('WebP images: ' + conf['webp']);
console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);

let plugins = [
    new webpack.ProvidePlugin({
        react: 'React',
        'react-dom': 'ReactDOM',
        /*$: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'],
        Util: 'exports-loader?Util!bootstrap/js/dist/util',
        Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
        Button: 'exports-loader?Button!bootstrap/js/dist/button',
        Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
        Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
        Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
        Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
        Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
        Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
        Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
        Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
    }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(NODE_ENV),
        },
        UINAME: JSON.stringify(UIInfo.name),
        UIVERSION: UIVERSION,
        UIAUTHOR: JSON.stringify(UIInfo.author),
        UIMetaNAME: JSON.stringify(UIMetaInfo.name),
        UIMetaVersion: JSON.stringify(UIMetaInfo.version),
        GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
        SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
        BASE_HREF: JSON.stringify(`http://${IP}:${PORT}`),
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: COMPRESS,
        debug: !COMPRESS,
    }),
    new MiniCssExtractPlugin({
        filename: 'css/[name].css',
        //allChunks: true,
    }),
];

if (COMPRESS) {
    plugins.push(
        new OptimizeCssAssetsPlugin({
            //assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default'],
            },
            cssProcessorOptions: {
                zindex: true,
                cssDeclarationSorter: true,
                reduceIdents: false,
                mergeIdents: true,
                mergeRules: true,
                mergeLonghand: true,
                discardUnused: true,
                discardOverridden: true,
                discardDuplicates: true,
                discardComments: {
                    removeAll: true,
                },
            },
            canPrint: true,
        }),
    );
    plugins.push(require('autoprefixer'));

    plugins.push(
        new ImageSpritePlugin({
            exclude: /exclude|original|default-|icons|sprite|logo|favicon/,
            commentOrigin: false,
            compress: COMPRESS,
            extensions: ['png'],
            indent: '',
            log: true,
            //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
            outputFilename: 'img/sprite-[hash].png',
            padding: 0,
        }),
    );
}

const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
if (filesystem.existsSync(indexPath)) {
    plugins.push(
        new HtmlWebpackPlugin({
            publicPath: '',
            template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
            templateParameters: {
                NODE_ENV: NODE_ENV,
                GRAPHQL_URL: conf['GRAPHQL_URL'],
                STATIC_URL: conf['STATIC_URL'],
                REACT_SCRIPTS: NODE_ENV === 'production' ?
                    '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
            },
        }),
    );
}

const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
if (filesystem.existsSync(faviconPath)) {
    plugins.push(
        new FaviconsWebpackPlugin({
            title: 'Webpack App',
            logo: faviconPath,
            prefix: '/icons/',
            emitStats: false,
            persistentCache: true,
            inject: false,
            statsFilename: path.join(
                conf.APPDIR,
                conf.DIST,
                'icons',
                'iconstats.json',
            ),
            icons: {
                android: true,
                appleIcon: true,
                appleStartup: true,
                coast: true,
                favicons: true,
                firefox: true,
                opengraph: true,
                twitter: true,
                yandex: true,
                windows: true,
            },
        }),
    );
}

// add themes favicons
commonVariables.themes.forEach((theme) => {
    const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
    if (filesystem.existsSync(faviconPath)) {
        plugins.push(
            new FaviconsWebpackPlugin({
                title: 'Webpack App',
                logo: faviconPath,
                prefix: '/' + theme + '-icons/',
                emitStats: false,
                persistentCache: true,
                inject: false,
                statsFilename: path.join(
                    conf.APPDIR,
                    conf.DIST,
                    theme + '-icons',
                    'iconstats.json',
                ),
                icons: {
                    android: true,
                    appleIcon: true,
                    appleStartup: true,
                    coast: true,
                    favicons: true,
                    firefox: true,
                    opengraph: true,
                    twitter: true,
                    yandex: true,
                    windows: true,
                },
            }),
        );
    }
});

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
    .BundleAnalyzerPlugin;
plugins.push(
    new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
    }),
);

const cfg = merge(common, {
    mode: NODE_ENV,
    cache: {
        type: 'filesystem',
    },
    recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
    optimization: {
        //removeAvailableModules: false,
        //realContentHash: false,
        splitChunks: {
            name: 'vendor',
            minChunks: 2,
        },
        concatenateModules: true, //ModuleConcatenationPlugin
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    module: false,
                    parse: {
                        // we want terser to parse ecma 8 code. However, we don't want it
                        // to apply any minfication steps that turns valid ecma 5 code
                        // into invalid ecma 5 code. This is why the 'compress' and 'output'
                        // sections only apply transformations that are ecma 5 safe
                        // https://github.com/facebook/create-react-app/pull/4234
                        ecma: 8,
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        // Disabled because of an issue with Uglify breaking seemingly valid code:
                        // https://github.com/facebook/create-react-app/issues/2376
                        // Pending further investigation:
                        // https://github.com/mishoo/UglifyJS2/issues/2011
                        comparisons: false,
                    },
                    keep_fnames: true,
                    keep_classnames: true,

                    mangle: {
                        safari10: true,
                        keep_fnames: true,
                        keep_classnames: true,
                        reserved: ['$', 'jQuery', 'jquery'],
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        // Turned on because emoji and regex is not minified properly using default
                        // https://github.com/facebook/create-react-app/issues/2488
                        ascii_only: true,
                    },
                },
                // Use multi-process parallel running to improve the build speed
                // Default number of concurrent runs: os.cpus().length - 1
                parallel: true,
            }),
        ],
    },

    output: {
        publicPath: path.join(conf.APPDIR, conf.DIST),
        path: path.join(__dirname, conf.APPDIR, conf.DIST),
        filename: path.join('js', '[name].js'),
    },

    module: {
        rules: [{
                test: /\.jsx?$/,
                //exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/react',
                            {
                                plugins: [
                                    '@babel/plugin-proposal-class-properties',
                                ],
                            },
                        ], //Preset used for env setup
                        plugins: [
                            ['@babel/transform-react-jsx']
                        ],
                        cacheDirectory: true,
                        cacheCompression: true,
                    },
                },
            },
            {
                test: /\.s?css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: !COMPRESS,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: !COMPRESS,
                        },
                    },
                ],
            },
            {
                test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                        publicPath: '../fonts/',
                    },
                }, ],
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                        publicPath: '../fonts/',
                    },
                }, ],
            },
            {
                test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
                use: [{
                    loader: 'img-optimize-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath: '../img/',
                        compress: {
                            // This will take more time and get smaller images.
                            mode: 'low', // 'lossless', 'high', 'low'
                            disableOnDevelopment: true,
                            webp: conf['webp'],
                            // loseless compression for png
                            optipng: {
                                optimizationLevel: 4,
                            },
                            // lossy compression for png. This will generate smaller file than optipng.
                            pngquant: {
                                quality: [0.2, 0.8],
                            },
                            // Compression for svg.
                            svgo: true,
                            // Compression for gif.
                            gifsicle: {
                                optimizationLevel: 3,
                            },
                            // Compression for jpg.
                            mozjpeg: {
                                progressive: true,
                                quality: 60,
                            },
                        },
                        inline: {
                            limit: 1,
                        },
                    },
                }, ],
            },
        ],
    },

    plugins: plugins,
});

console.log(cfg);
module.exports = cfg;