Skip to content

[Feature] Support manifest file #104

@alexander-akait

Description

@alexander-akait
Member

Why?
In some projects, I use external library (example jquery) and for the implamentation of this, I use this plugin (just copy files from another directory to other). The plugin supports the use of hash, but do not know original file path and resulting file path (include hash and other stuff). There is no manifest file 😭

Activity

SebastianS90

SebastianS90 commented on Feb 19, 2017

@SebastianS90

Assuming you name your destination files [name].[hash:10].[ext], try out this plugin:

new StatsWriterPlugin({
    fields: ['assets'],
    filename: 'manifest.json',
    transform(stats) {
        const manifest = {};
        stats.assets.map(asset => asset.name)
            .sort()
            .forEach((file) => {
                manifest[file.replace(/\.[a-f0-9]{10}\./, '.')] = file;
                                               // 10 is length of hash
            });
        return JSON.stringify(manifest, null, 2) + '\n';
    }
})

Isn't that something you can work with?

changed the title [-]Support manifest file[/-] [+][Feature] Support manifest file[/+] on Oct 5, 2017
Levdbas

Levdbas commented on Nov 2, 2017

@Levdbas

The guys from webpack-manifest-plugin have included a hook in their latest RC release which other plugins can use to give before and after filenames and locations. Maybe this can be used to solve the hashing issue in a more convienient way? I am by no means capable of guessing if this can work but its merely a suggestion.

shellscape/webpack-manifest-plugin#76

IAMtheIAM

IAMtheIAM commented on Dec 5, 2017

@IAMtheIAM

Here's a slightly modified regex that works with any length hash as long as it is inbetween two . characters, except the string .bundle. will be ignored

   new StatsWriterPlugin({
      fields  : ['assetsByChunkName', 'assets'],
      filename: 'webpack-manifest.json',
      transform: function(stats) {
         const manifest = {};
         stats.assets.map(asset => asset.name)
            .sort()
            .forEach((file) => {
               // matches anything between two dots `.` such as app.bundle.636876e2051c910a7ef8.js,
               // app.chunk.636876e2051c910a7ef8.js, app.style.636876e2051c910a7ef8.css or
               // app.636876e2051c910a7ef8.js, but don't match the `.bundle.`, `.chunk.`, or `.style.`
               let regEx = /[^.]+\.(?=[^.]+$)/gmi;
               let passTest = regEx.test(file);
               let key = file.replace(regEx, '');

               // remove any leading `/`
               regEx = /^\//gmi;
               key = key.replace(regEx, '');
               // console.log(file, passTest, key);

               manifest[key] = file;
            });

         return JSON.stringify(manifest, null, 2) + '\n';
      }
   }),

26 remaining items

ghost
chezhe

chezhe commented on Aug 28, 2019

@chezhe

@budarin Have you fix the problem —— key and value both hashed?

chezhe

chezhe commented on Aug 28, 2019

@chezhe

@evilebottnawi I met same problem with @budarin
webpack config

plugins: [
    new CopyPlugin([{
      from: 'public/src/img',
      test: /\.(png|jpe?g|gif|svg)$/i,
      to: 'img/[name].[md5:hash:hex:8].[ext]'
    }, {
      from: 'public/src/media',
      to: 'media/'
    }]),
    extractCSS,
    new ManifestPlugin({
      fileName: 'manifest.json',
      writeToFileEmit: true,
    }),
  ]

And got manifest

  "img/1-0-logo.e9833416.svg": "img/1-0-logo.e9833416.svg",
  "img/2-0-logo.89e800b4.svg": "img/2-0-logo.89e800b4.svg",
  "img/404.bfada369.png": "img/404.bfada369.png",

Any suggestion?

alexander-akait

alexander-akait commented on Aug 28, 2019

@alexander-akait
MemberAuthor

What is ManifestPlugin plugin? We need implement hook for this and plugins should use this hook

chezhe

chezhe commented on Aug 29, 2019

@chezhe

What is ManifestPlugin plugin? We need implement hook for this and plugins should use this hook

Here is webpack-manifest-plugin

chezhe

chezhe commented on Aug 29, 2019

@chezhe

What is ManifestPlugin plugin? We need implement hook for this and plugins should use this hook

#104 (comment)

This works for me, thanks for your reply.

squirrel532

squirrel532 commented on Sep 12, 2019

@squirrel532

I have another hack of making copy-webpack-plugin & webpack-assets-manifest works together.

static_file_mapping = {};
config = {
  plugins: [
    new CopyPlugin([{
            from: {
                glob: 'static/**/*.@(png|svg|jpg|gif|ico)',
                dot: false,
                noext: false,
            },
            to: '[contenthash].[ext]',
            // flatten: true
            transformPath(targetPath, absosutePath) {
                relative_path = path.relative(
                    path.resolve(root_dir),
                    absosutePath)
                static_file_mapping[relative_path] = targetPath;
                return targetPath;
            }
    }]),
    new ManifestPlugin({
      assets: static_file_mapping,
    })
  ]
}

The key point is to use transformPath for exposing mapping information to outside world. Then you can write this information to anywhere you want.

alexander-akait

alexander-akait commented on Oct 16, 2020

@alexander-akait
MemberAuthor

Close in favor #538

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @jasonwilliams@kevlened@deguif@chezhe@alexander-akait

        Issue actions

          [Feature] Support manifest file · Issue #104 · webpack-contrib/copy-webpack-plugin