Comments (4)
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.
from external-svg-sprite-loader.
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.
from external-svg-sprite-loader.
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?
from external-svg-sprite-loader.
So webpack-manifest-plugin
outputs a correct line and a wrong one?
from external-svg-sprite-loader.
Related Issues (20)
- Clearer errors when trying to use the latest version with Webpack 4
- Duplicated IDs in icon sprite
- angular13 not generate sprite file
- It doesn't work with webpack 5 cache=filesystem
- SVGO Options HOT 4
- "TypeError: loaders is not iterable" after upgrade to v4 HOT 8
- Odd behavior when generating a manifest file HOT 8
- Error when defining Rule.use as a function HOT 2
- Using `webpack-chain` breaks default options HOT 1
- It doesn't generate svg sprite HOT 17
- The module removes "fill" attribute when converting to symbol HOT 2
- Alternative (simpler) way to address the images inside the sprite (no math) HOT 1
- deprecation warning for chunk.files in webpack 5 HOT 1
- The sprite status is blocked: origin (webpack --mode production) HOT 23
- Can't run in storybook
- Deprecation warning for Chunk.modulesIterable
- Breaks with [email protected] HOT 3
- SvgStorePlugin fails if there are any other unrelated errors in the build HOT 1
- Support and compatibility with Webpack 4 regarding mini-css-extract-plugin HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from external-svg-sprite-loader.