Remplace custom Webpack config with Encore

Author: jvasseur

generators/symfony/templates/base-twig/.babelrc

@@ -2,7 +2,7 @@
 /.php-cs-fixer.cache
 /node_modules/
 /phpunit.xml
-/public/assets/
+/public/build/
 /public/bundles/
 /var/
 /vendor/

generators/symfony/templates/base-twig/.gitignore

@@ -26,6 +26,7 @@
         "symfony/twig-bundle": "^6.4.13",
         "symfony/validator": "^6.4.17",
         "symfony/web-link": "^6.4.13",
+        "symfony/webpack-encore-bundle": "^2.2.0",
         "symfony/yaml": "^6.4.13"
     },
     "require-dev": {

generators/symfony/templates/base-twig/composer.json

@@ -11,4 +11,5 @@
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true, 'test' => true],
     Sentry\SentryBundle\SentryBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

generators/symfony/templates/base-twig/composer.lock

@@ -0,0 +1,45 @@
+webpack_encore:
+    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
+    output_path: '%kernel.project_dir%/public/build'
+    # If multiple builds are defined (as shown below), you can disable the default build:
+    # output_path: false
+
+    # Set attributes that will be rendered on all script and link tags
+    script_attributes:
+        defer: true
+        # Uncomment (also under link_attributes) if using Turbo Drive
+        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
+        # 'data-turbo-track': reload
+    # link_attributes:
+        # Uncomment if using Turbo Drive
+        # 'data-turbo-track': reload
+
+    # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
+    # crossorigin: 'anonymous'
+
+    # Preload all rendered script and link tags automatically via the HTTP/2 Link header
+    # preload: true
+
+    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
+    # strict_mode: false
+
+    # If you have multiple builds:
+    # builds:
+        # frontend: '%kernel.project_dir%/public/frontend/build'
+
+        # pass the build name as the 3rd argument to the Twig functions
+        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
+framework:
+    assets:
+        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
+
+#when@prod:
+#    webpack_encore:
+#        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+#        # Available in version 1.2
+#        cache: true
+
+#when@test:
+#    webpack_encore:
+#        strict_mode: false

generators/symfony/templates/base-twig/config/bundles.php

@@ -8,6 +8,7 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
+    "@symfony/webpack-encore": "^5.0.1",
     "@thetribe/eslint-config": "^0.5.0",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
@@ -19,18 +20,19 @@
     "postcss": "^8.5.1",
     "postcss-loader": "^8.1.1",
     "sass": "^1.83.4",
-    "sass-loader": "^13.3.3",
+    "sass-loader": "^16.0.4",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^11.0.0",
     "webpack": "^5.97.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.2",
-    "webpack-manifest-plugin": "^5.0.0"
+    "webpack-dev-server": "^4.15.2"
   },
   "scripts": {
-    "build": "webpack",
+    "build": "encore production --progress",
+    "dev": "encore dev",
+    "dev-server": "encore dev-server",
     "lint:js": "eslint assets webpack.config.js",
     "lint:scss": "stylelint 'assets/**/*.scss'",
-    "start": "webpack-dev-server --host 0.0.0.0"
+    "watch": "encore dev --watch"
   }
 }

generators/symfony/templates/base-twig/config/packages/assets.yaml

@@ -483,6 +483,22 @@
             "config/routes/dev/web_profiler.yaml"
         ]
     },
+    "symfony/webpack-encore-bundle": {
+        "version": "2.2",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.0",
+            "ref": "35ee1edee91a1a7137095f53db7ed0c20884b745"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/styles/app.css",
+            "config/packages/webpack_encore.yaml",
+            "package.json",
+            "webpack.config.js"
+        ]
+    },
     "symfony/yaml": {
         "version": "v4.3.3"
     },

generators/symfony/templates/base-twig/config/packages/webpack_encore.yaml

@@ -4,13 +4,13 @@
         <meta charset="UTF-8">
         <title>{% block title %}Symfony{% endblock %}</title>
         {% block stylesheets %}
-            <link rel="stylesheet" href="{{ asset('base.css') }}">
+            {{ encore_entry_link_tags('base') }}
         {% endblock %}
     </head>
     <body>
         {% block body %}{% endblock %}
         {% block javascripts %}
-            <script src="{{ asset('base.js') }}"></script>
+            {{ encore_entry_script_tags('base') }}
         {% endblock %}
     </body>
 </html>