after upgrade to Webpack 5 not able to access the menifest in copy-webpack-plugin

user_6455628 0
Viewed 270

My config was working fine in webpack version 4.6.0 and webpack-assets-manifest version 3.1.1

since I upgraded to webpack 5 and webpack-assets-manifest to 5. I'm not getting value in my manifestObject it's just empty object

I suspect this is happening because transform function running before manifest is created looked into the new documentation of webpack-assets-manifest but could not get it working

my goal is to access manifest value in transform function, but it looks like transform function is running before manifest is generated

var CopyWebpackPlugin = require('copy-webpack-plugin');
var SaveHashes = require('webpack-assets-manifest');

const manifest = new SaveHashes({
    entrypoints: true,
    entrypointsKey: 'entryPoints'
});
module.exports = {
    entry: {
        main: ['./src/apps/main'],
        games: ['./src/apps/games'],
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: assetsUrl,
        filename: 'assets/javascript/[name].[contenthash].js',
        chunkFilename: 'assets/javascript/[name].[contenthash].js'
    },
    .
    .
    .
    .
    .
    plugins: [
        new CleanWebpackPlugin(),
        manifest,
        new CopyWebpackPlugin([
            {
                from: './views/**/*',
                to: path.join(__dirname, 'dist'),
                transform(content, path) {
                    // I want to access manifest here
                    // so that I can inject the final script(javascript bundle with content hash)
                    // in my view template
                    const manifestObject = JSON.parse(manifest);
                }
            }
        ])
    ]
};
webpack javascript
1 Answers

you need to export it like this


const ManifestPlugin = require("webpack-manifest-plugin").WebpackManifestPlugin;

.....
  new ManifestPlugin({
            fileName: "asset-manifest.json",
            publicPath: paths.publicUrlOrPath,
            generate: (seed, files, entrypoints) => {
                const manifestFiles = files.reduce((manifest, file) => {
                    manifest[ file.name ] = file.path;

                    return manifest;
                }, seed);
                const entrypointFiles = entrypoints.main.filter(
                    (fileName) => !fileName.endsWith(".map")
                );

                return {
                    files: manifestFiles,
                    entrypoints: entrypointFiles,
                };
            },
        }),

and it will work WebpackManifestPlugin is what you need

user_73665260
Related