consistency with others loaders in manifest.json

[hiousi]

external-svg-sprite-loader helps me save a good clean sprite.[hash:8].svg file!
I've tried to use it with webpack-manifest-plugin and webpack-assets-manifest to generate a manifest.json, used to find the corresponding compiled /path/to/sprite.svg -> /path/to/sprite.[hash:8].svg

But I can not obtain the good filename and path to my sprite.svg file. Note that webpack-manifest-plugin and webpack-assets-manifest generate the good filenames when used with other loaders.

my config:

   loader: ExternalSvgSprite.loader,
   options: {
         name: 'img/sprite.[hash:8].svg', 
    }

what I would like to see in my manifest.json file:

{
  "img/sprite.svg": "img/sprite.8ef417c3.svg",
}

what I get with webpack-manifest-plugin, left part should not have the hash part. :

{
  "img/sprite.8ef417c3.svg": "img/sprite.8ef417c3.svg",
}

what I get with webpack-assets-manifest, left part should be img/sprite.svg :

{
  "sprite.svg": "img/sprite.8ef417c3.svg",
}

I'm not able to know if it's really a problem with external-svg-sprite-loader, but as the results are not consistent I ask here.

[bensampaio]

This is strange. I used webpack-manifest-plugin before and never got this issue 🤔 However, there was a problem recently with manifest plugins so it could be I missed something on the release to v4.

At the moment, I don't have a lot of time to look into this so if you could at least find the source and let me know what the problem is that would help a lot. Even better would be if you could submit a PR.

[hiousi]

Ok, I will try.
Working with webpack-manifest-plugin first. But I must admit that without a deep understanding of webpack internals I will not be able to resolve without your help.

this if my generated manifest.json (with default plugin options)

{
  "sprite.svg": "img/sprite.8ef417c3c.svg",
  "img/sprite.8ef417c3c.svg": "img/sprite.8ef417c3c.svg",
}

as I understand, 1st line comes from method registerSprites() where you're pushing to compilation.chunks, and the 2nd line comes from adding to compilation.assets

webpack-manifest-plugin gets assets information from compilation.getStats() and the hook compilation.hooks.moduleAsset. But the hook seems not to be called when the sprite is emitted.

Any advice to help me go further?

[bensampaio]

So webpack-manifest-plugin outputs a correct line and a wrong one?

[hiousi]

both are wrong :(
in most case the manifest is " a file with a mapping of all source file names to their corresponding output file". None of lines is usefull: one key is made with a non guessable hash (the asset line), the other is missing the path (the chunk line).

asset line

Looking for a fix for external-svg-sprite-loader.
External-svg-sprite-loader should emit a asset name without a hash in it.
webpack-manifest-plugin manipulate this file object before emiting the manifest;

{ path: 'img/sprite.8ef417c3c.svg',
  name: 'img/sprite.8ef417c3c.svg',
  isInitial: false,
  isChunk: false,
  isAsset: true,
  isModuleAsset: false
}

it should better have something like this:

{ path: 'img/sprite.8ef417c3c.svg',
  name: 'img/sprite.svg',
  isInitial: false,
  isChunk: false,
  isAsset: true,
  isModuleAsset: false
}

Looking at Webpack Manifest Plugin code, I saw that it gets assets information from compilation.getStats() and the hook compilation.hooks.moduleAsset. But the hook seems not to be called when the sprite is emitted. So file gets its name from path. That could be a start to understand, but I'm stuck here.

Fixing external-svg-sprite-loader will be the cleanest solution but I have a workaround for now:

chunk line

A workaround for Webpack Manifest Plugin that as nothing to do with external-svg-sprite-loader.
More I read about this subject more I get confused : lot of manifest plugins I've tested suffer from the same problem. This webpack-assets-manifest issue is one example how the generated manifest.json is confusing.

For people opening this kind of issues, and for me, manifest files should map a key to a real file with hash. Something like this:

{
  "mods/alpha.js": "mods/alpha.1234567890.js",
  "mods/omega.js": "mods/omega.0987654321.js"
}

A mapping looking like this {path}/{filename} : {path}/{filename_with_hash}

BUT, Webpack Manifest Plugin does not do that for now. It output all chunk lines without the path part.

Using this workaround in my config

new ManifestPlugin({
    map: (file) => {
             if (file.isChunk)
                      file.name = path.join(path.dirname(file.path), file.name);
             return file;
    },
})

I get this resulting manifest.json:

{
  "img/sprite.svg": "img/sprite.8ef417c3c.svg",
  "img/sprite.8ef417c3c.svg": "img/sprite.8ef417c3c.svg",
}

it adds the path to chunk line, and that line can be used to find the sprite.