More rewords and removed the addStyleEntry() method

javiereguiluz · javiereguiluz · commit 478b93dd361e · 2017-08-07T10:50:59.000+02:00
diff --git a/frontend/encore/simple-example.rst b/frontend/encore/simple-example.rst
@@ -7,6 +7,16 @@ an ``assets/`` directory:
 * ``assets/js/app.js``
 * ``assets/css/app.scss``
 
+Let's consider that the project follows the recommended practice of importing
+the CSS files for their associated JavaScript files:
+
+.. code-block:: javascript
+
+    // assets/js/app.js
+    require('../css/app.scss');
+
+    // ...rest of JavaScript code here
+
 With Encore, we can easily minify these files, pre-process ``app.scss``
 through Sass and a *lot* more.
 
@@ -31,11 +41,8 @@ Inside, use Encore to help generate your Webpack configuration.
         // empty the outputPath dir before each build
         .cleanupOutputBeforeBuild()
 
-        // will output as web/build/js/app.js
-        .addEntry('js/app', './assets/js/app.js')
-
-        // will output as web/build/css/app.css
-        .addStyleEntry('css/app', './assets/css/app.scss')
+        // will create web/build/app.js and web/build/app.css
+        .addEntry('app', './assets/js/app.js')
 
         // allow sass/scss files to be processed
         .enableSassLoader()
@@ -78,7 +85,7 @@ Actually, to use ``enableSassLoader()``, you'll need to install a few
 more packages. But Encore will tell you *exactly* what you need.
 
 After running one of these commands, you can now add ``script`` and ``link`` tags
-to the new, compiled assets (e.g. ``/build/css/app.css`` and ``/build/js/app.js``).
+to the new, compiled assets (e.g. ``/build/app.css`` and ``/build/app.js``).
 In Symfony, use the ``asset()`` helper:
 
 .. code-block:: twig
@@ -88,11 +95,11 @@ In Symfony, use the ``asset()`` helper:
     <html>
         <head>
             <!-- ... -->
-            <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
+            <link rel="stylesheet" href="{{ asset('build/app.css') }}">
         </head>
         <body>
             <!-- ... -->
-            <script src="{{ asset('build/js/app.js') }}"></script>
+            <script src="{{ asset('build/app.js') }}"></script>
         </body>
     </html>
 
@@ -119,7 +126,7 @@ Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
 
 .. code-block:: javascript
 
-    // assets/js/main.js
+    // assets/js/app.js
 
     // loads the jquery package from node_modules
     var $ = require('jquery');
@@ -136,44 +143,13 @@ That's it! When you build your assets, jQuery and ``greet.js`` will automaticall
 be added to the output file (``app.js``). For common libraries like jQuery, you
 may want also to :doc:`create a shared entry </frontend/encore/shared-entry>` for better performance.
 
-Requiring CSS Files from JavaScript
------------------------------------
-
-Above, you created an entry called ``js/app`` that pointed to ``app.js``:
-
-.. code-block:: javascript
-
-    Encore
-        // ...
-        .addEntry('js/app', './assets/js/app.js')
-    ;
-
-Once inside ``app.js``, you can even require CSS files:
-
-.. code-block:: javascript
-
-    // assets/js/app.js
-    // ...
-
-    // a CSS file with the same name as the entry js will be output
-    require('../css/app.scss');
-
-Now, both an ``app.js`` **and** an ``app.css`` file will be created in the
-``build/js/`` dir. You'll need to add a link tag to the ``app.css`` file in your
-templates:
-
-.. code-block:: diff
-
-    <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
-    + <link rel="stylesheet" href="{{ asset('build/js/app.css') }}">
-
-This article follows the traditional setup where you have just one main CSS file
-and one main JavaScript file. In lots of modern JavaScript applications, it's
-common to have one "entry" for each important section (homepage, blog, store, etc.)
+Multiple JavaScript Entries
+---------------------------
 
-In those applications, it's better to just add JavaScript entries in the Webpack
-configuration file and import the CSS files from the JavaScript entries, as
-shown above:
+The previous example is the best way to deal with SPA (Single Page Applications)
+and very simple applications. However, as your application grows, you'll need to
+define more entries with the JavaScript and CSS code of some specific sections
+(homepage, blog, store, etc.)
 
 .. code-block:: javascript
 
