How to use compression-webpack-plugin - 10 common examples

new webpack.optimize.UglifyJsPlugin({
                /* eslint-disable camelcase */
                beautify: false,
                mangle: {
                    screw_ie8: true,
                    keep_fnames: true,
                },
                compress: {
                    screw_ie8: true,
                },
                comments: false,
                /* eslint-enable camelcase */
            }),
        isProd &&
            isAnalysis === false &&
            new CompressionPlugin({
                test: {
                    // Fake RegExp
                    test(file) {
                        return /\.pre\.css$/.test(file) === false && /\.(js|css|svg)$/.test(file) === true;
                    },
                },
                deleteOriginalAssets: true,
            }),
        isProd && new webpack.optimize.ModuleConcatenationPlugin(),
        isProd && new webpack.HashedModuleIdsPlugin(),
    ]),
    node: {
        fs: "empty",
        net: "empty",
        tls: "empty",
    },

// both options are optional
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }),

      // Generate a manifest file which contains a mapping of all asset filenames
      // to their corresponding output file so that tools can pick it up without
      // having to parse `index.html`.
      new ManifestPlugin({
        fileName: 'asset-manifest.json',
        publicPath,
      }),

      ...middlewarePlugins,

      gzipConfig && new CompressionPlugin(gzipConfig),
      brotliConfig && new BrotliPlugin(brotliConfig),

      new ExpoProgressBarPlugin(),

      ...reportPlugins,
    ].filter(Boolean),
    module: {
      strictExportPresence: false,
      rules: [
        // Disable require.ensure because it breaks tree shaking.
        { parser: { requireEnsure: false } },
        {
          oneOf: allLoaders,
        },
      ].filter(Boolean),
    },

new webpack.NoErrorsPlugin()
  );
}
else if (__PROD__) {
  debug('Enable plugins for production (OccurenceOrder, Dedupe, UglifyJS, & GZip).');
  webpackConfig.plugins.push(
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        unused: true,
        dead_code: true,
        warnings: false,
      },
    }),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$/,
      threshold: 10240,
      minRatio: 0.8,
    })
  );
}

// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
  webpackConfig.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor'],
    })
  );

: null,

    // ignore locales imported by momentjs, both sides, requires you to require them explicitly
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

    // extract css, only client side and prod
    !isDev && !isServer
      ? new ExtractTextPlugin({
          filename: 'static/css/[name].[hash:8].css',
          allChunks: true,
        })
      : null,

    // compress to gz, only client side assets and prod
    !isDev && !isServer
      ? new CompressionPlugin({
          asset: '[path].gz',
          algorithm: 'gzip',
        })
      : null,

    // offline plugin , only client side assets and prod mode
    !isDev && !isServer && OfflinePlugin != null
      ? new OfflinePlugin({
          AppCache: false,
          autoUpdate: true,
          caches: {
            main: ['**/vendor.*.{css,js}', '**/main.*.{css,js}'],
            additional: [':rest:'],
            // main: ['**/vendor-*.{css,js}', '**/main-*.{css,js}'],
            // additional: ['**/*.{css,js,jpg,jpeg,png,ogg,svg,woff,woff2,ttf}'],
            // additional: [':rest:'],

new OptimizeJsPlugin({
		sourceMap: true
	}),
	// extract vendor chunks
	new webpack.optimize.CommonsChunkPlugin({
		name: 'vendor',
		minChunks: module => {
			// this assumes your vendor imports exist in the node_modules directory
			return module.context && module.context.indexOf('node_modules') !== -1
		}
	}),
	// manifest chunk, more info in webpack docs
	new webpack.optimize.CommonsChunkPlugin({
		name: 'manifest'
	}),
	new CompressionPlugin({
		algorithm: 'gzip'
	}),
	new OfflinePlugin({
		caches: {
			main: [
				'vendor.*.js',
				'vendor.*.css',
				'manifest.*.js',
				'client.*.js',
				'assets/icons.*.*'
			],
			additional: [':externals:'],
			optional: [':rest:']
		},
		externals: [
			'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin'

__INJECT_HTML__: injectHtml,
      __APP_ENV__: JSON.stringify(appEnv),
    }),
    new FriendlyErrorsWebpackPlugin(),
  ];

  if (isDev) {
    plugins.push(new WebpackNotifierPlugin({
      excludeWarnings: true,
      title: `${process.env.PWD.split('/').pop()}`,
    }));
    plugins.push(new webpack.HotModuleReplacementPlugin());
  } else {
    plugins.push(
      new webpack.HashedModuleIdsPlugin(),
      new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.jsx?$|\.css$|\.(scss|sass)$|\.html$/,
        threshold: 10240,
        minRatio: 0.8,
      }),
      new ImageminPlugin({
        pngquant: { quality: '95-100' },
      }),
      new BundleAnalyzerPlugin({
        analyzerMode:
          process.env.NODE_ENV === 'analyze' ? 'server' : 'disabled',
      })
    );
  }

config.plugins.push(
    new ExtractTextPlugin({ filename: `${cssNamePattern}.css` }),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
      },
      mangle: {
        screw_ie8: true,
      },
      output: {
        comments: false,
        screw_ie8: true,
      },
    }),
    new CompressionPlugin({
      asset: '[path].gz',
      test: /\.(css|js)$/,
    }),
    new CleanWebpackPlugin(outputPath, { allowExternal: true }),
  );

  if(bundleAnalyze) {
    config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
  }
} else {
  config.devServer = devServer;
  config.output.publicPath = publicPath;
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
  );
}

config: ExpoConfig
): Configuration | DevConfiguration {
  const gzipConfig = overrideWithPropertyOrConfig(
    config.web?.build?.gzip,
    DEFAULT_GZIP_OPTIONS,
    true
  );
  const brotliConfig = enableWithPropertyOrConfig(
    config.web?.build?.brotli,
    DEFAULT_BROTLI_OPTIONS,
    true
  );

  if (!Array.isArray(webpackConfig.plugins)) webpackConfig.plugins = [];

  if (gzipConfig) webpackConfig.plugins.push(new CompressionPlugin(gzipConfig));
  if (brotliConfig) webpackConfig.plugins.push(new BrotliPlugin(brotliConfig));

  return webpackConfig;
}

},
        plugins: removeEmpty([
            new webpack.DefinePlugin({
                'process.env': {
                    COVERS_WORKSHEET_ID: JSON.stringify(process.env.COVERS_WORKSHEET_ID),
                    CURIOSITIES_WORKSHEET_ID: JSON.stringify(process.env.CURIOSITIES_WORKSHEET_ID),
                    INSTANCE_NAME: process.env.INSTANCE_NAME,
                    NODE_ENV: process.env.NODE_ENV,
                    POSITIONS_WORKSHEET_ID: JSON.stringify(process.env.POSITIONS_WORKSHEET_ID),
                    SHIRTS_WORKSHEET_ID: JSON.stringify(process.env.SHIRTS_WORKSHEET_ID),
                    SPREADSHEET_ID: JSON.stringify(process.env.SPREADSHEET_ID),
                    TEMPLATE_NAME: process.env.TEMPLATE_NAME,
                },
            }),
            new webpack.optimize.ModuleConcatenationPlugin(),
            new CompressionPlugin({
                algorithm: 'gzip',
                asset: '[path].gz[query]',
                cache: true,
                test: /\.(html|css|js)$/,
            }),
            new CopyWebpackPlugin([
                {
                    from: resolve(srcPath, 'assets'),
                    to: 'assets',
                },
            ]),
            ifProduction(new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })),
            new SimpleProgressWebpackPlugin(),
            new CleanWebpackPlugin([resolve(distPath, '*'), resolve(__dirname, '.tmp', '*')]),
            new HtmlWebpackPlugin({
                filename: 'index.html',

WEBPACK_PRERENDERING: true,
    }),

    new StaticSiteGeneratorPlugin({
      entry: 'prerender',
      paths: Object.keys(prerenderConfig.paths),
      locals: {
        pathStates: prerenderConfig.paths,
      },
      globals: {
        window: {},
        ...prerenderConfig.globals,
      },
    }),

    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: (input: any, compressionOptions: any, callback: any) =>
        gzip(input, compressionOptions, callback),
      test: /\.(html)$/,
      threshold: 1024,
      minRatio: 0.9,
    } as any),

    new BrotliPlugin({
      asset: '[path].br[query]',
      test: /\.(html)$/,
      threshold: 1024,
      minRatio: 0.9,
    }),
  ];