Reworded some explanations in the basic Webpack Encore example #8204
Conversation
|
I've been thinking about this too - and I think something doe need to be done :). I also think there are 2 different use-cases, but mine are different: A) you have a single page application (or a small app) and so need just one app.css and app.js for the entire site B) you have a more traditional multi-page site where you have some global CSS and JS, but also have page-specific js and CSS Situation (A) is simple, and I agree we should probably start with it. But your implementation is not how I would do it. I would have a single entry - 'app'. And inside, I would require my main CSS file. This one entry would dump an app.js file and an app.css file. addStyleEntry() is kind of a hack: you're supposed to create js entries... and require any necessary .js from there. So that how I would explain it. Is then fairly quickly talk about multiple page apps. In this situation, you would still have the same app entry that's included on every page . But suddenly when your checkout page needs its own custom js and CSS, you add a checkout entry. If you need any CSS, you require that from your checkout js file. The end result is a checkout.js file and a checkout.css file (assuming you required some css) that you should include on the checkout page only. I'm not 100% sure this is the best setup - as webpack often assumes you have a SPA, but I've thought a lot about this, and it seems like a very good way to organize things. Cheers! |
|
Thanks for your comment. As you know, I'm fairly new to this way of working with assets in modern JavaScript apps, so I'm still trying to learn the best strategy. So I'm going to propose a better reword based on your comment. Thanks! |
|
@weaverryan I've reworded the article according to your comments. I think it's much better now. Thanks! |
…example (javiereguiluz) This PR was squashed before being merged into the 3.3 branch (closes #8204). Discussion ---------- Reworded some explanations in the basic Webpack Encore example There are two main ways of using Webpack: * Old apps: generate 1 app.css and 1 app.js file for the entire website * New apps: generate 1 CSS and 1 JS for each "entry" (each important section) I feel that the existing article tries to mix both. That's why we use "global.scss" as the name of the CSS file instead of "app.scss" to avoid name collisions with the "app.css" generated by "app.js" entry. I propose to use first the old way and then explain better the modern way. Commits ------- 478b93d More rewords and removed the addStyleEntry() method f855793 Typo 381570d Reworded some explanations in the basic Webpack Encore example
|
Sorry for the delay. This is REALLY wonderful :). I'm opening a new PR with some minor tweaks, but I like this so much better - it's excellent. |
There are two main ways of using Webpack:
I feel that the existing article tries to mix both. That's why we use "global.scss" as the name of the CSS file instead of "app.scss" to avoid name collisions with the "app.css" generated by "app.js" entry.
I propose to use first the old way and then explain better the modern way.