recipe webpack

assets/bootstrap.js

@@ -4,7 +4,7 @@ import { startStimulusApp } from '@symfony/stimulus-bridge';
 export const app = startStimulusApp(require.context(
     '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
     true,
-    /\.(j|t)sx?$/
+    /\.[jt]sx?$/
 ));
 
 // register any custom, 3rd party controllers here

config/packages/assets.yaml

@@ -1,3 +0,0 @@
-framework:
-    assets:
-        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

config/packages/prod/webpack_encore.yaml

@@ -1,4 +0,0 @@
-#webpack_encore:
-    # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
-    # Available in version 1.2
-    #cache: true

config/packages/test/webpack_encore.yaml

@@ -1,2 +0,0 @@
-#webpack_encore:
-#    strict_mode: false

config/packages/webpack_encore.yaml

@@ -33,3 +33,17 @@ webpack_encore:
     # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
     # Put in config/packages/prod/webpack_encore.yaml
     # cache: true
+
+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

package.json

@@ -1,20 +1,24 @@
 {
     "devDependencies": {
-        "@hotwired/stimulus": "^3.0",
+        "@babel/core": "^7.17.0",
+        "@babel/preset-env": "^7.16.0",
+        "@hotwired/stimulus": "^3.0.0",
         "@popperjs/core": "^2.10.2",
         "@symfony/stimulus-bridge": "^3.2.1",
-        "@symfony/webpack-encore": "^2.1.0",
+        "@symfony/webpack-encore": "^4.0.0",
         "bootstrap": "^5.1.3",
         "bootstrap-star-rating": "^4.1.2",
-        "core-js": "^3.0.0",
+        "core-js": "^3.23.0",
         "font-awesome": "^4.7.0",
         "jquery": "^3.6.0",
         "jquery-ui": "^1.13.0",
-        "regenerator-runtime": "^0.13.2",
+        "regenerator-runtime": "^0.13.9",
         "sass": "^1.43.3",
         "sass-loader": "^12.2.0",
         "stimulus": "^3.0.1",
-        "webpack-notifier": "^1.6.0"
+        "webpack": "^5.74.0",
+        "webpack-notifier": "^1.15.0",
+        "webpack-cli": "^4.10.0",
     },
     "license": "UNLICENSED",
     "private": true,

symfony.lock

@@ -568,12 +568,12 @@
         ]
     },
     "symfony/webpack-encore-bundle": {
-        "version": "1.9",
+        "version": "1.15",
         "recipe": {
             "repo": "github.com/symfony/recipes",
-            "branch": "master",
-            "version": "1.9",
-            "ref": "0f274572ea315eb3b5884518a50ca43f211b4534"
+            "branch": "main",
+            "version": "1.10",
+            "ref": "5878c7c28468ca0fdce2497a04cfc66bab0dc3ef"
         },
         "files": [
             "assets/app.js",
@@ -581,9 +581,6 @@
             "assets/controllers.json",
             "assets/controllers/hello_controller.js",
             "assets/styles/app.css",
-            "config/packages/assets.yaml",
-            "config/packages/prod/webpack_encore.yaml",
-            "config/packages/test/webpack_encore.yaml",
             "config/packages/webpack_encore.yaml",
             "package.json",
             "webpack.config.js"

webpack.config.js

@@ -11,7 +11,7 @@ Encore
     .setOutputPath('public/build/')
     // public path used by the web server to access the output path
     .setPublicPath('/build')
-    // only needed for CDN's or sub-directory deploy
+    // only needed for CDN's or subdirectory deploy
     //.setManifestKeyPrefix('build/')
 
     /*
@@ -45,14 +45,15 @@ Encore
     // enables hashed filenames (e.g. app.abc123.css)
     .enableVersioning(Encore.isProduction())
 
-    .configureBabel((config) => {
-        config.plugins.push('@babel/plugin-proposal-class-properties');
-    })
+    // configure Babel
+    // .configureBabel((config) => {
+    //     config.plugins.push('@babel/a-babel-plugin');
+    // })
 
-    // enables @babel/preset-env polyfills
+    // enables and configure @babel/preset-env polyfills
     .configureBabelPresetEnv((config) => {
         config.useBuiltIns = 'usage';
-        config.corejs = 3;
+        config.corejs = '3.23';
     })
 
     // enables Sass/SCSS support