升级到 Webpack 5 后无法访问 copy-webpack-plugin 中的清单答案

【问题标题】：after upgrade to Webpack 5 not able to access the menifest in copy-webpack-plugin升级到 Webpack 5 后无法访问 copy-webpack-plugin 中的清单
【发布时间】：2021-10-14 04:20:43
【问题描述】：

我的配置在 webpack 版本 4.6.0 和 webpack-assets-manifest 版本 3.1.1 中运行良好

自从我升级到 webpack 5 和 webpack-assets-manifest 到 5。我的manifestObject 没有价值，它只是一个空对象

我怀疑这是因为转换函数在创建清单之前运行查看了 webpack-assets-manifest 的新文档，但无法正常工作

我的目标是在转换函数中访问清单值，但看起来转换函数在生成清单之前正在运行

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);
                }
            }
        ])
    ]
};

【问题讨论】：

标签： javascript webpack

【解决方案1】：

你需要这样导出


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,
                };
            },
        }),

它会工作WebpackManifestPlugin是你需要的

【讨论】：