search

cascornelissen / svg-spritemap-webpack-plugin

SVG spritemap plugin for webpack
MIT License
207 stars 50 forks source link

How to generate "build/svg/icons.svg": "build/svg/icons.05c988844bf3b74a.svg" in manifest.json? #149

Closed insekticid closed 3 years ago

insekticid commented 3 years ago

What I am doing wrong? Thanks for help!

new SVGSpritemapPlugin([
    'assets/svg/**/*.svg',
], {output: {filename: 'svg/icons.[contenthash].svg'}, sprite: { prefix: false, generate: {title: false } }})
cascornelissen commented 3 years ago

I'm going to need a bit more information 😅 What is it you're trying to do exactly, what have you tried and what isn't working as you expected?

I'm guessing you also use webpack-manifest-plugin to generate a manifest.json but it doesn't include the spritemap SVG? If that's the case, can you provide a minimal repository that I can use to reproduce the issue?

toooni commented 3 years ago

I am not sure but I think I have the same issue:

When using a `contenthash` in the filename the entry in manifest.json looks like this:
 "build/sprite.aeb090b754a85b4b.svg": "/build/sprite.aeb090b754a85b4b.svg",

the desired entry would be:

"build/sprite.svg": "/build/sprite.aeb090b754a85b4b.svg",

UPDATE: This issue happens only in webpack 5. I was moving from webpack 4 to 5. Before the entry in my manifest.json looked like this:

"build/spritemap.svg": "build/sprite.bd5fd8015e5ac551.svg",
toooni commented 3 years ago

I think I've worked it out. The new version starting at v3.0.0 from https://github.com/shellscape/webpack-manifest-plugin has a new removeKeyHash option. This option by default is /([a-f0-9]{32}\.?)/gi. This means that only hashes with the length of 32 characters are removed.

A working solution is to set the removeKeyHash option to /([a-f0-9]{16,32}\.?)/gi.

cascornelissen commented 3 years ago

It looks like more plugins are running into this: https://github.com/shellscape/webpack-manifest-plugin/issues/241.

I'm hoping they change it on the side of webpack-manifest-plugin because I don't see any specific reasons why a hash has to be a certain length (in this scenario). Let's keep this issue (and the PR) open for now until things are clearer.

The workaround for now is to manually specify the removeHashKey option as described in https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/149#issuecomment-772505150.

cascornelissen commented 3 years ago

Submitted the PR to increase the range in webpack-manifest-plugin at https://github.com/shellscape/webpack-manifest-plugin/pull/248.

Also found out about the output.hashDigestLength Webpack option so the change in ec05468 should increase consistency a bit in that regard.

cascornelissen commented 3 years ago

Since https://github.com/shellscape/webpack-manifest-plugin/pull/248 has been merged and I'm expecting it to be released not too long from now as well, I'm going to close this issue. Thanks to everyone involved ✌🏼