squeezelite-esp32/components/wifi-manager/webapp/webpack/webpack.prod.js

/* eslint-disable  */
// Merges webpack.common config with this production config
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

// Optimisations and Compression
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');
const fs = require('fs');
const glob = require('glob');
var WebpackOnBuildPlugin = require('on-build-webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')

// Optional
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const PATHS = {
    src: path.join(__dirname, 'src')
  }
module.exports = merge(common, {
    mode: 'production',
    stats: 'errors-only',
    optimization: {
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                exclude: /node_modules/,
                cache: true,
                parallel: 4,
                sourceMap: true,
            }),
            new OptimizeCSSAssetsPlugin({})
        ],
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            // maxInitialRequests: Infinity,
            // minSize: 0,
            cacheGroups: {
                vendor: {
                    test: /node_modules/, // you may add "vendor.js" here if you want to
                    name: "node-modules",
                    chunks: "initial",
                    enforce: true
                },
            }
        },
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:6].css',
            chunkFilename: 'css/[name].[contenthash].css',

        }),
        new ExtractTextPlugin('[name].css?[hash]'),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/*`),
      whitelist: ['whitelisted']
    }),
        new CleanWebpackPlugin(),
        new CompressionPlugin({
            test: /\.(js|css|html|svg)$/,
            filename: '[path].br[query]',
            algorithm: 'brotliCompress',
            compressionOptions: { level: 11 },
            threshold: 100,
            minRatio: 0.8,
            deleteOriginalAssets: false
        }),
        new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$/,
            threshold: 100,
            minRatio: 0.8,
        }),
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            // lossLess gif compressor
            gifsicle: {
                optimizationLevel: 9
            },
            // lossy png compressor, remove for default lossLess
            pngquant: ({
                quality: '75'
            }),
            // lossy jpg compressor
            plugins: [imageminMozjpeg({
                quality: '75'
            })]
        }), 
        // new FaviconsWebpackPlugin({
        //     // Your source logo
        //     logo: './src/assets/images/200px-ControllerAppIcon.png',
        //     // // The prefix for all image files (might be a folder or a name)
        //     //prefix: 'assets/icons_[hash:6]/',
        //     prefix: 'icons_[hash:6]/',
        //     // // Emit all stats of the generated icons
        //     //emitStats: false,
        //     // // The name of the json containing all favicon information
        //     // statsFilename: 'iconstats-[hash].json',
        //     // // Generate a cache file with control hashes and
        //     // // don't rebuild the favicons until those hashes change
        //     persistentCache: true,
        //     // // Inject the html into the html-webpack-plugin
        //     inject: true,
        //     // // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
        //     background: '#fff',
        //     // // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
        //      icons: {
        //     //   android: false,
        //     //   appleIcon: false,
        //        favicons: true
        //     //   firefox: true,
        //     //   windows: false
        //     }
        // }),
        new WebpackOnBuildPlugin(function(stats) {
                var getDirectories = function (src, callback) {
                    glob(`${src}/**/*(*.gz|favicon-32x32.png)`, callback);
                  };
                getDirectories('./webpack/dist', function (err, list) {
                    if (err) {
                        console.log('Error', err);
                    } else {
                        const regex = /^(.*\/)([^\/]*)$/
                        const relativeRegex = /(\w+\/[^\/]*)$/
                        const makePathRegex = /([^\.].*)$/
                        let exportDefHead=
                        '/***********************************\n'+
                        'webpack_headers\n'+
                        stats+'\n'+
                        '***********************************/\n'+
                        '#pragma once\n'+
                        '#include <inttypes.h>\n'+
                        'extern const char * resource_lookups[];\n'+
                        'extern const uint8_t * resource_map_start[];\n'+
                        'extern const uint8_t * resource_map_end[];\n';
                        let exportDef=  '// Automatically generated. Do not edit manually!.\n'+
                                        '#include <inttypes.h>\n';
                        let lookupDef='const char * resource_lookups[] = {\n';
                        let lookupMapStart='const uint8_t * resource_map_start[] = {\n';
                        let lookupMapEnd='const uint8_t * resource_map_end[] = {\n';
                        let cMake='';
                        list.forEach(fileName=>{
                              let exportName=fileName.match(regex)[2].replace(/[\. \-]/gm,'_');
                              let relativeName=fileName.match(relativeRegex)[1];
                              exportDef+=	'extern const uint8_t _'+exportName+'_start[] asm("_binary_'+exportName+'_start");\n'+
                                        'extern const uint8_t _'+exportName+'_end[] asm("_binary_'+exportName+'_end");\n';
                              lookupDef+='\t"/'+relativeName+'",\n';
                              lookupMapStart+='\t_'+ exportName+'_start,\n';
                              lookupMapEnd+= '\t_'+ exportName+'_end,\n';
                              cMake+='target_add_binary_data( __idf_wifi-manager ./webapp'+fileName.match(makePathRegex)[1]+' BINARY)\n';
                        });

                        lookupDef+='""\n};\n';
                        lookupMapStart=lookupMapStart.substring(0,lookupMapStart.length-2)+'\n};\n';
                        lookupMapEnd=lookupMapEnd.substring(0,lookupMapEnd.length-2)+'\n};\n';
                        try {
                            fs.writeFileSync('webapp.cmake', cMake);
                            fs.writeFileSync('webpack.c', exportDef+lookupDef+lookupMapStart+lookupMapEnd);
                            fs.writeFileSync('webpack.h', exportDefHead);
                            //file written successfully
                          } catch (e) {
                            console.error(e);
                          }        
                    }
                    });                
               }),
               new BundleAnalyzerPlugin()               
    ]
});