How are static assets handled?

[javiereguiluz]

A question by @jrobeson on Symfony Slack:

So, with the manifest file approach for versioning, how are static assets handled? like referenced images that aren't in CSS.

I was previously using the hashed-asset-bundle, but you can't use the new manifest versioning with it.

Yes, you can't currently use json_manifest_path alongside a normal symfony version_strategy.

[stof]

@jrobeson actually you can. Symfony supports having several asset packages with different versioning strategies. so you could have 1 package using the manifest strategy, and another one using hashed-asset-bundle (or just use hashed-asset-bundle for all of them, by disabling the path-based versioning of encore)

Oh packages! I had forgotten that they exist. I guess that's one way to go about it.

I wonder if other folks are gonna use different versioning schemes for these static assets vs webpack or just me. If so, it might be good to see a recommendation somewhere.

[BPScott]

+1 for a mechanism to add static assets such as images into the manifest.json.

Currently I have a gulp file generates a manifest that deals with hashing my css, js and images, if I were to use encore I'd like to use the same versioning strategy for all my static assets js and css.

[weaverryan]

+1 for there being a way for processing these through webpack. Actually, it's pretty standard already - if you (for example) require a image or font from CSS (or even JS), it will be moved into the build/ directory and added to the manifest. But, I want to make sure we're following whatever the best "best-practice" is for this. There are also simple "copy" plugins, but I don't like this solution - afaik, those assets don't go through webpack, so they're not added to the manifest.

[davidmpaz]

The main problem for me here is that templates (Twig or else) contain references to assets (images) that will never be handled by webpack unless we do it explicitely.

Solutions tried were:

1. At build time try to make webpack require all resources in a directory. This did not work as expected. I still need a file in my application modules doing that logic. I dont want build logic mixed with my application.

2. Use copy plugin. This does what I need with the drawback exposed before about the manifest. Still there are request for adding support to it in [Feature] Support manifest file webpack-contrib/copy-webpack-plugin#104 is not active I would say.

So far I havent found anything else. If somebody has ideas pls share :)

[skaryys]

@davidmpaz Is there now any working solution? I am using Encore now together with CopyWebpackPlugin and ImageMinPlugin and it works -> but with one problem. I am not able to put copied images to manifest.json.
I tried to use your last pull request: https://github.com/danethurber/webpack-manifest-plugin/pull/45, but it does not generate files with hash in filename.

If it can be done now, I would really appreciate an example. Thanks!

[weaverryan]

There's no working solution yet - but it's on my "todo" list.

As a workaround, you should be able to add a require call in any .js file for the assets you need. For example:

# app.js

require('./images/foo.png');

This should cause foo.png to be copied into the build directory and be in the manifest.json file. As an added bonus, when you require a static file like this, the require() call actually returns the final path to the asset, so you can use it in js if needed :).

Let me know if that works. I'd like a more official way to do this, but really, this is what that official solution will be doing behind the scenes.

Cheers!

[skaryys]

It works, thanks!
I think i can live with that now. In project with many images, it could be problem to require them all like this, but thats not my case.

[davidmpaz]

@skaryys your scenario is the same as mine. For me is not good also to require all images since it is too much and at that point that is a build/deploy task, I did not want it in application code.

did you read about plugin execution order? This thread gave me the hints needed.

Basically unshift your plugin so it executes before the manifest plugin.

My working solution with PR applied, not using it yet though :)

let CopyWebpackPlugin = require('copy-webpack-plugin');
        // important to use `unshift` since this plugin should execute first
        // or at least before ManifestPlugin to get manifest right
        webpackConfig.plugins.unshift(new CopyWebpackPlugin([
            {
                from: resourcesPath + '/img',
                to: outputPath + '/images'
            }
        ]));

Hints for the future:
Try to make referenced links for issues threads ;) ... Remember that references to other issues or pull requests are important since can make more visible the reach of that issue. It is better to have something like shellscape/webpack-manifest-plugin#45 instead the full url like https://github.com/danethurber/webpack-manifest-plugin/pull/45, the first create a reference in that other thread, the second doeasn't. Syntax in github markdown danethurber/webpack-manifest-plugin#45

let me know if this helps.

[skaryys]

@davidmpaz Ok, i was able to generate manifest.json file now thanks to you including the copied assets. Have you somehow managed to copy statics files with adding hash to their filenames?
I am now using temporary solution from @weaverryan, but in future in osme project it would be really annoying require all the images as you had said before.

Thanks anyway for the unshift solution and hints ;)

[davidmpaz]

I am glad it helped ;)....

Copy plugin has some functionality for naming files with hashes and so on but you need to try.

I had problem with that part, somehow the copy plugin was messing around when I passed some globs like: img/**/* you need to try yourself, please report results if possible.

I tried:
Using simple names, for example not recursing inside dir, plugin worked fine for adding hashes like:
img/[name].[hash].[ext] but like this it was missing all other subdirs as far I remember.

I did not dive into it since in my case those images copied will rarely change, so it can just be copied as is. I don't need hashing them. With having it in manifest to integrate with framework later on was good enough.

[skaryys]

@davidmpaz I was succesfully able to copy assets with hash but the manifest then looked like this:

{
"/img/image-[hash].jpg": "/img/image-[hash].jpg"
}

So instead of dealing with the ManifestPlugin, I wrote little script which generates javascript file which looks like this:

const image = require(path_to_image);
const anotherimage = require(path_to_image);

For me and my project, it works. I am quite unskilled with NodeJS and creating packages, but if it will be useful for someone, I will be glad ;)

skaryys/encore-require-assets-helper