From c7ae2eaec6a3ddb0c90e44fe771c1a0498e64bbc Mon Sep 17 00:00:00 2001
From: Scott <ProtonScott@users.noreply.github.com>
Date: Wed, 21 Nov 2018 18:33:27 -0800
Subject: [PATCH 1/2] Changing the wording around module.exports

Hello!

I just want to point something out here:

Using the commonjs format (require() and module.exports, though node does add some additional things on top of that spec) *is not* the same, or even roughly the same, which is implied/stated by this line here:

>Instead of using require and module.exports like shown above, JavaScript has an alternate syntax, which is a more accepted standard. Choose whichever you want: they do the same thing.

I propose a minor edit here, which is that we actually want to clarify that the ECMAScript standard that has been finalized (often this is known as ES6 or ES2015. There was a minor revision in there but thats long since passed in either case) and one of the purposes, per the Module spec, is that this is the standard for which modules will be *native to the browser*. (In the evergreen versions of Safari, Chrome, Firefox, and I think even Edge now, you can use `<script type="module" src="somemodule.js">` and it will work fine). They are also the only official way of using dynamic imports, as highlighted [in your own documentation](https://symfony.com/doc/current/frontend/encore/code-splitting.html) in a way that I think gets the point across very well.

I think this is very misleading otherwise. You do in fact see a performance decoupling bundling the commonjs modules, as webpack can't take advantage of code splitting with dynamic imports without using ECMAScript modules (more or less, from a high level view).

Of course I'm okay changing whatever wording as needed, but I think we should really point out that require() and import are two *very* different beasts, and I am happy to write up as to way, give links, etc.
---
 frontend/encore/simple-example.rst | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/encore/simple-example.rst b/frontend/encore/simple-example.rst
index 6e0840fdce2..7a085b5bf46 100644
--- a/frontend/encore/simple-example.rst
+++ b/frontend/encore/simple-example.rst
@@ -180,8 +180,10 @@ The import and export Statements
 --------------------------------
 
 Instead of using ``require`` and ``module.exports`` like shown above, JavaScript
-has an alternate syntax, which is a more accepted standard. Choose whichever you
-want: they do the same thing.
+has an alternate syntax, which is the new finalized ECMAScript standard for using modules in the browser, including
+the ability to use dynamic imports
+
+.. 
 
 To export values using the alternate syntax, use ``exports``:
 
@@ -333,8 +335,7 @@ If you want to only compile a CSS file, that's possible via ``addStyleEntry()``:
     Encore
         // ...
 
-        .addStyleEntry('some_page', './assets/css/some_page.css')
-    ;
+        .addStyleEntry('some_page', './assets/css/some_page.css');
 
 This will output a new ``some_page.css``.
 

From 441574b547a745fe34c348b360c416125a289a19 Mon Sep 17 00:00:00 2001
From: Javier Eguiluz <javier.eguiluz@gmail.com>
Date: Mon, 3 Dec 2018 11:23:30 +0100
Subject: [PATCH 2/2] Minor tweaks

---
 frontend/encore/simple-example.rst | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/encore/simple-example.rst b/frontend/encore/simple-example.rst
index 7a085b5bf46..922ebdfd3ed 100644
--- a/frontend/encore/simple-example.rst
+++ b/frontend/encore/simple-example.rst
@@ -180,10 +180,8 @@ The import and export Statements
 --------------------------------
 
 Instead of using ``require`` and ``module.exports`` like shown above, JavaScript
-has an alternate syntax, which is the new finalized ECMAScript standard for using modules in the browser, including
-the ability to use dynamic imports
-
-.. 
+provides an alternate syntax based on the `ECMAScript 6 modules`_ that includes
+the ability to use dynamic imports.
 
 To export values using the alternate syntax, use ``exports``:
 
@@ -335,7 +333,8 @@ If you want to only compile a CSS file, that's possible via ``addStyleEntry()``:
     Encore
         // ...
 
-        .addStyleEntry('some_page', './assets/css/some_page.css');
+        .addStyleEntry('some_page', './assets/css/some_page.css')
+    ;
 
 This will output a new ``some_page.css``.
 
@@ -346,3 +345,4 @@ Encore support many more features! For a full list of what you can do, see
 `Encore's index.js file`_. Or, go back to :ref:`list of Encore articles <encore-toc>`.
 
 .. _`Encore's index.js file`: https://github.com/symfony/webpack-encore/blob/master/index.js
+.. _`ECMAScript 6 modules`: https://hacks.mozilla.org/2015/08/es6-in-depth-modules/