Ajax request for external sprite with hash

[thomasaull]

I've got a question: In my current setup, I'm usinkg svg-sprite-loader to extract all svgs in an external file, which I'm loading in my website via an ajax-request. However, if I try to use a hashed filename, I have no idea how to build my request URL. I tried to use the webpack.ExtendedAPIPlugin which publishes a webpack_hash variable, but some this differs from the hash generated by svg-sprite-loader

Relevant part of my webpack.config.js:

{
  test: /\.svg$/,
  use: [
    { loader: 'svg-sprite-loader', options: {
      extract: true,
      spriteFilename: 'sprite.[hash].svg'
    }},
    { loader: 'svgo-loader', options: {
      plugins: svgoplugins
    }}
  ]
}

[kisenka]

@thomasaull and that is the question? You need to determine hash of sprite file?

[thomasaull]

Yes, basically I need the hash in one of my javascript files

Am 15.08.2017 um 16:48 schrieb Stas Kurilov [email protected]:

@thomasaull and that is the question? You need to determine hash of sprite file?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[kisenka]

It can be done via simple plugin which find sprite file in assets and replace some placeholder in sources with it.

app.js

const spriteUrl = '__SPRITE_URL__'; // this placeholder will be replaced with actual sprite filename

webpack.config.js

const { replaceInModuleSource, getAllModules } = require('svg-sprite-loader/lib/utils');

plugins: [
  ...,

  {
      apply(compiler) {
        compiler.plugin('emit', (compilation, done) => {
          const { assets } = compilation;
          const spriteFilename = Object.keys(assets)
            .find(assetName => assetName.startsWith('sprite.'));

          getAllModules(compilation).forEach((module) => {
            replaceInModuleSource(module, {
              __SPRITE_URL__: spriteFilename
            });
          });

          done();
        });
      }
    }
]

[kisenka]

@thomasaull ping

[thomasaull]

I'm sorry Stas, I was quite busy the last days, I'm gonna try your suggestion next week! :)

Am 17.08.2017 um 22:48 schrieb Stas Kurilov [email protected]:

@thomasaull ping

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[thomasaull]

No… Unfortunately this doesn't work. If i console.log my spriteUrl it is still the string 'SPRITE_URL' … @kisenka

[kisenka]

@thomasaull I need a test repo then, It's fastest way to help you

[kisenka]

@thomasaull ping, still actual?

[thomasaull]

@kisenka Kinda… But not urgent right now. If ok for you, I'm gonna reopen this issue as soon as I got a test repo for you!

[kisenka]

@thomasaull have you tried solution in my comment? Problem is that there could be a few sprite files and simple replace placeholder with hash will not work.

[thomasaull]

I did try that and the result was, that somehow the SPRITE_URL wasn't replaced with the actual sprite Url, it was still just SPRITE_URL in my compiled code…

[thomasaull]

@kisenka I spend some hours trying to figure out what's wrong… turn's out the Uglify Plugin interferes in some way that the __SPRITE_URL__ replacement does not work anymore. You can find a test repo over here: https://github.com/thomasaull/svg-sprite-loader_testrepo

if you remove the UglifyJS Plugin at the bottom of the webpack.config and run npm run dev it's working. With UglifyJS it's not… Would be awesome if you could look into this, since my webpack knowledge is too limited to figure this one out…

Update: Tried it in my production environment, and there it's the same issue. Removing UglifyJS makes the sprite url replacement work. So, really grateful for any help :)

[kisenka]

@thomasaull sorry for the delay, I'll check your demo ASAP

[thomasaull]

Any news @kisenka?

[RehanSaeed]

Also interested in how to get the URL of the icon sprite file containing the hash.

[pdoreau]

Me too. I also the tried the __SPRITE_URL__ solution and this deprecation message is displayed :

(node:3601) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

Did you guys finally make it work ? @kisenka do you now recommend something else ?