Assets files in .js served dynamically?

[simplenotezy]

How would I go about referencing an asset like this?

	selector.css('background-image', 'url(' + general.theme_file_uri + '/dist/images/flags/48/' + region.toLowerCase() + '.svg' + ')');

It won’t work once I build to production

[mmirus]

Hey @simplenotezy,

There are probably a bunch of different approaches to this problem, but one option would be to modify your webpack config to not use cache busting on your flags, which would probably make sense given that they are unlikely to change.

I believe this section in webpack.config.js is where you need to look:

{
  test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
  include: config.paths.assets,
  loader: 'url',
  options: {
    limit: 4096,
    name: `[path]${assetsFilenames}.[ext]`,
  },
},

You could modify either the test RegEx or the include path to narrow it down so as to exclude your flags, and then add a new section below it that only targets your flags. In that new section, I believe you would use [path][name].[ext] for the name.

Good luck!

[codepuncher]

Depending on my situation, I tend to use wp_localize_script to make data like this globally accessible to my JS.
So on one of my sites that had country flags, I just added an array of languages with images using asset_path.

In my JS I can just do sage_data.countries.germany.flag_image to get the image URL.

Hope that helps!

[simplenotezy]

Thanks that could work. How could I ignore a specific folder? Like “flags”

[mmirus]

I’d read up on webpack config options, but maybe something like this:

{
  test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
  include: config.paths.assets,
  exclude: `${config.paths.assets}/images/flags`,
  loader: 'url',
  options: {
    limit: 4096,
    name: `[path]${assetsFilenames}.[ext]`,
  },
},
{
  test: /\.svg$/,
  include: `${config.paths.assets}/images/flags`,
  loader: 'url',
  options: {
    limit: 4096,
    name: `[path][name].[ext]`,
  },
},

Of course make sure that the values in the exclude line in the first block and the include line in the second block both match your actual path for the flags. This is untested, so you might need to experiment with it a bit.

[simplenotezy]

Thanks a lot @mmirus, I have tried what you have posted, as well as some tweaks of it.

It doesn’t exclude the flags.

I have also tried like this:

 exclude: config.paths.assets + '/images/flags/48/',

I have verified the full path is indeed correct.

None of this works:

  {
    test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
    include: config.paths.assets,
    exclude: config.paths.assets + '/images/flags/48/',
    loader: 'url',
    options: {
      limit: 4096,
      name: `[path]${assetsFilenames}.[ext]`,
    },
  },
  {
    test: /\.svg$/,
    include: config.paths.assets + '/images/flags/48',
    loader: 'url',
    options: {
      limit: 4096,
      name: `[path][name].[ext]`,
    },
  },

I tried editing /resources/build/webpack.config.js, even removing chaning [path]${assetsFilenames}.[ext] to[path][name].[ext] didn’t remove the cachebusting either. .very weird. So far I have simply disabled cachebusting from config.js.

[mmirus]

Sorry, I’m not sure, then. Not a webpack expert, unfortunately. You could try something like @codepuncher suggested above.