Image loading, additional twig functions

[maryo]

• Changed asset naming
• Added two additional twig functions
  • webpack_file_asset (image loading)
  • webpack_css_asset

related to https://github.com/mariusbalcytis/webpack-bundle/issues/7

[mariusbalcytis]

Thanks for taking time for this!

Sorry, that I didn't inform that I was working on somewhat different solution for this problem:

• entry-file-loader requires to disable all configured loaders
• entry-file-loader has it's own configuration, separate from file-loader. This can cause duplicate files being generated
• there is additional twig function for almost the same effect - webpack_asset with second parameter does almost the same as webpack_file_asset from client point of view. If css (or less) file would be loaded as entry, it would work, but not with webpack_file_asset

So, I made a different loader - extract-file-loader to be used with file-loader.

Also I made it to work with webpack_asset function - if second argument is not passed, it guesses it. It involves some configuration for rarer cases, but by default should work in most.

Any comments are welcome - maybe I overlooked some use-case where this would not be so practical.

CSS function is still missing, but I'm not sure about it's naming - should it be different than webpack_asset to indicate that it outputs some HTML code? For example webpack_css_tag etc. Or maybe it would be better to make it as in assetic - with tag? For example: {% webpack_stylesheets 'asset.js' %}<link rel="stylesheet" href="{{ asset }}"/>{% end_webpack_stylesheets %}

Thanks for the code, mine was practically based on your idea.

[maryo]

@mariusbalcytis :+1: I am aware of the entry-loader issues and was planning to solve it in a similar way. Disabling other loaders was just a temporary solution. I actually agree with everyting and I am in favor of the webpack_stylesheets tag not only because of HTML/XHTML - the context is unknown.

[kristinalyba]

@mariusbalcytis I am looking for functionality to replace Assetic's bundling of resources as {% javascripts ... <script src="{{ asset_url }}"></script> {% endjavascripts %}.

Tag webpack_javascripts seems to be the solution but I found out it doesn't merge files. Is there any reason for that and maybe anyone else needs this feature (bundling)?

Thanks.

[mariusbalcytis]

I would not like to make this (at least by default) because of several reasons:

• it's not really "webpack" way. Assets are to be bundled inside your javascript files, like var jquery = require('jquery'); etc. That's the whole beauty of using webpack in the first place;
• if assets that you are including are big vendor files (and not your several small files), it makes more sense not to merge them into a single file. If single file changes, browser does not have to download all merged assets - it could reuse cached ones. It makes even more sense when used with HTTP/2.

For caching to work well, one should configure nginx (or other used server) to serve static javascript files with long-term cache headers (like at least a year). Of course, only javascript files with unique filenames should be used for this to work correctly.

If you're interested, you could take a look at webpack-migration-bundle which finds Assetic tags and replaces them with webpack_asset function calls.

If you would still think that merging files would be useful, could you create another issue?