multiple entry points

[MichaelKubovic]

Hey there, I'm wondering what would be the preferred way to automatically include multiple entry points in twig. Let's say I'd like to have one entry point per page.

[mariusbalcytis]

Do you have anything particular in mind about "automatically"?

You can by default provide as many entry points as you like, for example:

{# inside page1.html.twig #}
<script src="{{ webpack_asset('@ApplicationBundle/Resources/assets/script1.js') }}"></script>

{# inside page2.html.twig #}
<script src="{{ webpack_asset('@ApplicationBundle/Resources/assets/script2.js') }}"></script>

... and so on.

If these JavaScript files have common dependencies (both require('jquery') etc.), you can use commons chunk to separate common dependencies into separate file. Please see Using commons chunk in readme for instructions.

Did I get your question or did you have something else in mind?

[MichaelKubovic]

Thank you, this anwsers my question. I could define new block in layout and override it in child templates with concrete entry point. Would you require stylesheets the same way or its better to require it directly from js module? Would make a pure scss module sense as entry point if no javascript is required on a page?

Sent from my iPhone

On 17. 6. 2017, at 23:49, Marius Balčytis notifications@github.com wrote:

Do you have anything particular in mind about "automatically"?

You can by default provide as many entry points as you like, for example:

{# inside page1.html.twig #}

{# inside page2.html.twig #}

... and so on.

If these JavaScript files have common dependencies (both require('jquery') etc.), you can use commons chunk to separate common dependencies into separate file. Please see Using commons chunk in readme for instructions.

Did I get your question or did you have something else in mind?

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

[mariusbalcytis]

If you're using any CSS, you should also provide separate tag for stylesheets. If you require at least some CSS/SCSS from JavaScript, provide same JavaScript file as an entry point, like this:

{% webpack css '@ApplicationBundle/Resources/assets/script1.js' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
{% end_webpack %}

If you additionally have some basic CSS/SCSS which should be available without requiring it, or if you use it in pages without JavaScript, then just provide it as entry point in the same way:

{% webpack css '@ApplicationBundle/Resources/assets/main.scss' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
{% end_webpack %}

You could also provide extract_css: false - this would include CSS files dynamically from JavaScript, but this could make page flicker. Please see Stylesheets in readme.