Set up differential serving

.browserslistrc

@@ -0,0 +1,12 @@
+# Browsers that we support
+
+[legacy]
+Last 2 versions
+IE >= 11
+not IE 10
+not ie_mob 10
+
+[modern]
+chrome >= 80
+firefox >= 80
+safari >= 12

babel.config.json

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": "auto",
+        "useBuiltIns": "usage",
+        "corejs": "core-js@3"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

config/packages/webpack_encore.yaml

@@ -1,6 +1,6 @@
 webpack_encore:
     # The path where Encore is building the assets - i.e. Encore.setOutputPath()
-    output_path: '%kernel.project_dir%/public/build'
+    output_path: false
     # If multiple builds are defined (as shown below), you can disable the default build:
     # output_path: false
 
@@ -19,11 +19,9 @@ webpack_encore:
     # strict_mode: false
 
     # If you have multiple builds:
-    # builds:
-        # pass "frontend" as the 3rg arg to the Twig functions
-        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
-
-        # frontend: '%kernel.project_dir%/public/frontend/build'
+    builds:
+        legacy: '%kernel.project_dir%/public/legacy-build'
+        modern: '%kernel.project_dir%/public/modern-build'
 
     # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
     # Put in config/packages/prod/webpack_encore.yaml

config/services.yaml

@@ -34,6 +34,10 @@ services:
     App\EventSubscriber\CommentNotificationSubscriber:
         $sender: '%app.notifications.email_sender%'
 
+    # 'webpack_encore.tag_renderer'
+    App\Twig\EncoreExtension:
+        arguments: ['@webpack_encore.tag_renderer']
+
 when@test:
     services:
         test.user_password_hasher:

package.json

@@ -23,9 +23,9 @@
     "license": "MIT",
     "private": true,
     "scripts": {
-        "dev-server": "encore dev-server",
-        "dev": "encore dev",
-        "watch": "encore dev --watch",
-        "build": "encore production --progress"
+        "dev-server": "encore dev-server -c webpack.modern.config.js  & encore dev-server -c webpack.legacy.config.js",
+        "dev": "encore dev -c webpack.modern.config.js & encore dev -c webpack.legacy.config.js & wait",
+        "watch": "encore dev --watch -c webpack.modern.config.js  & encore dev --watch -c webpack.legacy.config.js",
+        "build": "encore production --progress -c webpack.modern.config.js & encore production --progress -c webpack.legacy.config.js & wait"
     }
 }