How to use webpack-assets-manifest - 8 common examples

getPlugins() {
    return [
      ...super.getPlugins(),
      // Emit a file with assets paths
      // https://github.com/sporto/assets-webpack-plugin#options
      new AssetsPlugin({
        path: this.resolvePath('build'),
        filename: 'assets.js',
        processOutput: x => `module.exports = ${JSON.stringify(x)};`,
      }),
      new WebpackAssetsManifest({
        output: this.resolvePath('build/asset-manifest.json'),
        publicPath: true,
        writeToDisk: true,
        customize: ({ key, value }) => {
          // You can prevent adding items to the manifest by returning false.
          if (key.toLowerCase().endsWith('.map')) return false;
          return { key, value };
        },
        done: (manifest, stats) => {
          // Write chunk-manifest.json.json
          // const chunkFileName = this.resolvePath('build/asset-manifest.json');
          const chunkFileName = this.resolvePath('build/chunk-manifest.json');
          try {
            const fileFilter = file => !file.endsWith('.map');
            const addPath = file => manifest.getPublicPath(file);
            const chunkFiles = stats.compilation.chunkGroups.reduce((acc, c) => {

// Clean dist directory
			(new CleanWebpackPlugin({
				verbose: false,
				cleanOnceBeforeBuildPatterns: [
					`${this.outputPath}/${this.appDir}`,
				],
			}) as unknown) as webpack.Plugin,
			// Initiate mini css extract
			new MiniCssExtractPlugin({
				filename: `${this.appDir}/${
					this.isDev ? '[name]' : '[name]-[contenthash:8]'
				}.css`, // we do it this way, so that we can easily setup e2e tests, we can always predict what the name would be
				ignoreOrder: false,
			}),
			// Create Manifest for PHP Consumption
			(new WebpackAssetsManifest({
				writeToDisk: true,
				output: `${this.outputPath}/${this.appDir}/manifest.json`,
				publicPath: ``, // We dont put ${this.config.outputPath}/ here because, PHP will pick it up anyway.
				entrypoints: true,
				entrypointsKey: 'wpackioEp',
			}) as unknown) as webpack.Plugin,
		];
		// Add ts checker plugin if project has tsconfig.json
		const [isTs, tsconfigPath] = hasTypeScript(this.cwd);
		if (isTs && this.file.hasTypeScript !== false) {
			// dynamic require forktschecker otherwise it will throw error
			try {
				// eslint-disable-next-line import/no-extraneous-dependencies, global-require, @typescript-eslint/no-var-requires
				const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
				plugins.push(
					new ForkTsCheckerWebpackPlugin({

getPlugins() {
    return [
      ...super.getPlugins(),
      // Emit a file with assets paths
      // https://github.com/sporto/assets-webpack-plugin#options
      new AssetsPlugin({
        path: this.resolvePath('build'),
        filename: 'assets.js',
        processOutput: x => `module.exports = ${JSON.stringify(x)};`,
      }),
      new WebpackAssetsManifest({
        output: this.resolvePath('build/asset-manifest.json'),
        publicPath: true,
        writeToDisk: true,
        customize: ({ key, value }) => {
          // You can prevent adding items to the manifest by returning false.
          if (key.toLowerCase().endsWith('.map')) return false;
          return { key, value };
        },
        done: (manifest, stats) => {
          // Write chunk-manifest.json.json
          // const chunkFileName = this.resolvePath('build/asset-manifest.json');
          const chunkFileName = this.resolvePath('build/chunk-manifest.json');
          try {
            const fileFilter = file => !file.endsWith('.map');
            const addPath = file => manifest.getPublicPath(file);
            const chunkFiles = stats.compilation.chunkGroups.reduce((acc, c) => {

getPlugins() {
    return [
      ...super.getPlugins(),
      // Emit a file with assets paths
      // https://github.com/sporto/assets-webpack-plugin#options
      new AssetsPlugin({
        path: this.resolvePath('build'),
        filename: 'assets.js',
        processOutput: x => `module.exports = ${JSON.stringify(x)};`,
      }),
      new WebpackAssetsManifest({
        output: this.resolvePath('build/asset-manifest.json'),
        publicPath: true,
        writeToDisk: true,
        customize: ({ key, value }) => {
          // You can prevent adding items to the manifest by returning false.
          if (key.toLowerCase().endsWith('.map')) return false;
          return { key, value };
        },
        done: (manifest, stats) => {
          // Write chunk-manifest.json.json
          // const chunkFileName = this.resolvePath('build/asset-manifest.json');
          const chunkFileName = this.resolvePath('build/chunk-manifest.json');
          try {
            const fileFilter = file => !file.endsWith('.map');
            const addPath = file => manifest.getPublicPath(file);
            const chunkFiles = stats.compilation.chunkGroups.reduce((acc, c) => {

template: paths.appEmbedHTML,
            inject: "head",
          }),
          new HtmlWebpackPlugin({
            filename: "story.html",
            template: paths.appEmbedStoryHTML,
            inject: "head",
          }),
          new HtmlWebpackPlugin({
            filename: "storyButton.html",
            template: paths.appEmbedStoryButtonHTML,
            inject: "head",
          })
        ),
        ...ifBuild(
          new WebpackAssetsManifest({
            output: "embed-asset-manifest.json",
            entrypoints: true,
            integrity: true,
          })
        ),
      ]),
    },
    /* Webpack config for count */
    {
      ...baseConfig,
      optimization: {
        ...baseConfig.optimization,
        // Ensure that we never split the count into chunks.
        splitChunks: {
          chunks: "async",
        },

test('produces a webpack config and friendly manifest plugin', async () => {
    simulate
        .statsAsDirectory()
        .statsAsFile()
        .productionEnvironment();
    const { clientConfig: config } = await configureWebpack({ context: '.' });
    expect(config).toMatchObject({
        context: '.',
        mode: 'production',
        optimization: expect.any(Object)
    });
    expect(config.entry).toHaveProperty('client');
    expect(config.module).toHaveProperty('rules');
    expect(WebpackAssetsManifest).toHaveBeenCalled();
    const { transform } = WebpackAssetsManifest.mock.calls[0][0];
    const assets = {
        entrypoints: {
            client: {
                js: ['client1.js', 'client2.js']
            }
        },
        'toLoad.js': 'toLoad.compiled.js',
        'RootCmp-FAKE.js': [
            'RootCmp-FAKE-1.compiled.js',
            'RootCmp-FAKE-2.compiled.js'
        ],
        'RootCmp-FAKER.js': 'RootCmp-FAKER-1.compiled.js',
        'image.svg': 'image-hash.svg'
    };
    transform(assets);

import globby from 'globby';
import { stripIndents } from 'common-tags';
import WebpackAssetsManifest from 'webpack-assets-manifest';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import PurifyCSSPlugin from 'purifycss-webpack';
import ImageminPlugin from 'imagemin-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

import { settings, userSettings } from '../config';
import { isDevMode, isProdMode } from './helpers';

const pkg = require('../../package.json');

const { config: userConfig } = userSettings;

const manifest = new WebpackAssetsManifest({
  output: path.resolve('.webpack-assets.json')
});

const copyVendorFiles = userConfig.vendor.includeStaticFiles.map(glob => {
  return {
    from: glob,
    context: 'node_modules',
    to: settings.destinations.vendorFiles
  };
});

const purifyCSSOptions = {
  paths: globby.sync(path.join(settings.destinations.handlebars, '**/*.html')),
  purifyOptions: {
    minify: true,
    cleanCssOptions: { level: { 1: { specialComments: 0 } } },

import webpack from 'webpack';
import globby from 'globby';
import {stripIndents} from 'common-tags';
import WebpackAssetsManifest from 'webpack-assets-manifest';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import PurifyCSSPlugin from 'purifycss-webpack';
import ImageminPlugin from 'imagemin-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

import {generateBanners, settings, useHandlebars} from '../config';
import {isDevMode, isProdMode} from './helpers';

const pkg = require('../../package.json');
const configFile = require('../../baumeister.json');

const manifest = new WebpackAssetsManifest({
	output: path.resolve('.webpack-assets.json')
});

const copyVendorFiles = configFile.vendor.includeStaticFiles.map(glob => {
	return {
		from: glob,
		context: 'node_modules',
		to: settings.destinations.vendorFiles
	};
});

const purifyCSSOptions = {
	paths: globby.sync(path.join(settings.destinations.handlebars, '**/*.html')),
	purifyOptions: {
		minify: true,
		cleanCssOptions: {level: {1: {specialComments: 0}}},