Installation webpack

.gitignore

-/.idea/*
+/.idea/*
+/node_modules

Resources/assets/app.js

+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.css';
+
+// start the Stimulus application
+import './bootstrap';

Resources/assets/apps/backend/common/app.common.js

+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './common.scss';
+import './common.js';
+
+// start the Stimulus application
+//import './bootstrap';
+
+alert('Yo !') ;

Resources/assets/apps/backend/common/common.js

+

Resources/assets/apps/backend/common/common.scss

+
+$color: red ;
+
+body {
+  background-color: $color ;
+}

Resources/assets/bootstrap.js

+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.(j|t)sx?$/
+));
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

Resources/assets/controllers.json

+{
+    "controllers": [],
+    "entrypoints": []
+}

Resources/assets/controllers/hello_controller.js

+import { Controller } from 'stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}

Resources/assets/styles/app.css

+body {
+    background-color: lightgray;
+}

Resources/public/build/backend-common.css

+body {
+  background-color: red;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9jb21tb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFLHFCQUhNO0FBQ1IsQyIsImZpbGUiOiJiYWNrZW5kLWNvbW1vbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJcbiRjb2xvcjogcmVkIDtcblxuYm9keSB7XG4gIGJhY2tncm91bmQtY29sb3I6ICRjb2xvciA7XG59Il0sInNvdXJjZVJvb3QiOiIifQ==*/

Resources/public/build/backend-common.js

+(self["webpackChunk"] = self["webpackChunk"] || []).push([["backend-common"],{
+
+/***/ "./Resources/assets/apps/backend/common/app.common.js":
+/*!************************************************************!*\
+  !*** ./Resources/assets/apps/backend/common/app.common.js ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _common_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./common.scss */ "./Resources/assets/apps/backend/common/common.scss");
+/* harmony import */ var _common_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common.js */ "./Resources/assets/apps/backend/common/common.js");
+/* harmony import */ var _common_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_common_js__WEBPACK_IMPORTED_MODULE_1__);
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+// any CSS you import will output into a single css file (app.css in this case)
+
+ // start the Stimulus application
+//import './bootstrap';
+
+alert('Yo !');
+
+/***/ }),
+
+/***/ "./Resources/assets/apps/backend/common/common.js":
+/*!********************************************************!*\
+  !*** ./Resources/assets/apps/backend/common/common.js ***!
+  \********************************************************/
+/***/ (() => {
+
+
+
+/***/ }),
+
+/***/ "./Resources/assets/apps/backend/common/common.scss":
+/*!**********************************************************!*\
+  !*** ./Resources/assets/apps/backend/common/common.scss ***!
+  \**********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+},
+/******/ __webpack_require__ => { // webpackRuntimeModules
+/******/ "use strict";
+/******/ 
+/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
+/******/ var __webpack_exports__ = (__webpack_exec__("./Resources/assets/apps/backend/common/app.common.js"));
+/******/ }
+]);
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9SZXNvdXJjZXMvYXNzZXRzL2FwcHMvYmFja2VuZC9jb21tb24vYXBwLmNvbW1vbi5qcyIsIndlYnBhY2s6Ly8vLi9SZXNvdXJjZXMvYXNzZXRzL2FwcHMvYmFja2VuZC9jb21tb24vY29tbW9uLnNjc3MiXSwibmFtZXMiOlsiYWxlcnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0NBR0E7QUFDQTs7QUFFQUEsS0FBSyxDQUFDLE1BQUQsQ0FBTCxDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FDZEEiLCJmaWxlIjoiYmFja2VuZC1jb21tb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2VsY29tZSB0byB5b3VyIGFwcCdzIG1haW4gSmF2YVNjcmlwdCBmaWxlIVxuICpcbiAqIFdlIHJlY29tbWVuZCBpbmNsdWRpbmcgdGhlIGJ1aWx0IHZlcnNpb24gb2YgdGhpcyBKYXZhU2NyaXB0IGZpbGVcbiAqIChhbmQgaXRzIENTUyBmaWxlKSBpbiB5b3VyIGJhc2UgbGF5b3V0IChiYXNlLmh0bWwudHdpZykuXG4gKi9cblxuLy8gYW55IENTUyB5b3UgaW1wb3J0IHdpbGwgb3V0cHV0IGludG8gYSBzaW5nbGUgY3NzIGZpbGUgKGFwcC5jc3MgaW4gdGhpcyBjYXNlKVxuaW1wb3J0ICcuL2NvbW1vbi5zY3NzJztcbmltcG9ydCAnLi9jb21tb24uanMnO1xuXG4vLyBzdGFydCB0aGUgU3RpbXVsdXMgYXBwbGljYXRpb25cbi8vaW1wb3J0ICcuL2Jvb3RzdHJhcCc7XG5cbmFsZXJ0KCdZbyAhJykgO1xuIiwiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luXG5leHBvcnQge307Il0sInNvdXJjZVJvb3QiOiIifQ==

Resources/public/build/entrypoints.json

+{
+  "entrypoints": {
+    "backend-common": {
+      "js": [
+        "/build/runtime.js",
+        "/build/backend-common.js"
+      ],
+      "css": [
+        "/build/backend-common.css"
+      ]
+    }
+  }
+}

Resources/public/build/manifest.json

+{
+  "build/backend-common.css": "/build/backend-common.css",
+  "build/backend-common.js": "/build/backend-common.js",
+  "build/runtime.js": "/build/runtime.js"
+}

composer.json

     "type": "symfony-bundle",
     "description": "Administration for Symfony applications based on easyadmin",
     "keywords": ["backend", "admin", "generator"],
-    "homepage": "https://gitea.laclic.fr/Laclic/AdminBundle",
+    "homepage": "https://gitea.laclic.fr/Laclic/SovBundle",
     "license": "MIT",
     "authors": [
         {
             "name": "La clic !",
-            "homepage": "laclic.fr/"
+            "homepage": "https://www.laclic.fr/"
         }
     ],
     "require": {
         "php": ">=7.2.5",
-        "easycorp/easyadmin-bundle": "^3.0",
         "artgris/filemanager-bundle": "^2.2",
+        "easycorp/easyadmin-bundle": "^3.0",
         "friendsofsymfony/ckeditor-bundle": "^2.2",
-        "stof/doctrine-extensions-bundle": "^1.5"
+        "stof/doctrine-extensions-bundle": "^1.5",
     },
     "config": {
         "sort-packages": true

package.json

+{
+  "devDependencies": {
+    "@symfony/webpack-encore": "^1.3.0",
+    "sass": "^1.32.12",
+    "sass-loader": "^11.0.0",
+    "webpack-notifier": "^1.6.0"
+  }
+}

webpack.config.js

+const Encore = require('@symfony/webpack-encore');
+
+// Manually configure the runtime environment if not already configured yet by the "encore" command.
+// It's useful when you use tools that rely on webpack.config.js file.
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+}
+
+Encore
+    // directory where compiled assets will be stored
+    .setOutputPath('Resources/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
+    //.setManifestKeyPrefix('build/')
+    .enableSassLoader()
+    /*
+     * ENTRY CONFIG
+     *
+     * Add 1 entry for each "page" of your app
+     * (including one that's included on every page - e.g. "app")
+     *
+     * Each entry will result in one JavaScript file (e.g. app.js)
+     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
+     */
+    .addEntry('backend-common', './Resources/assets/apps/backend/common/app.common.js')
+    //.addEntry('page1', './assets/page1.js')
+    //.addEntry('page2', './assets/page2.js')
+
+    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
+    .splitEntryChunks()
+
+    // will require an extra script tag for runtime.js
+    // but, you probably want this, unless you're building a single-page app
+    .enableSingleRuntimeChunk()
+
+    /*
+     * FEATURE CONFIG
+     *
+     * Enable & configure other features below. For a full
+     * list of features, see:
+     * https://symfony.com/doc/current/frontend.html#adding-more-features
+     */
+    .cleanupOutputBeforeBuild()
+    .enableBuildNotifications()
+    .enableSourceMaps(!Encore.isProduction())
+    // enables hashed filenames (e.g. app.abc123.css)
+    .enableVersioning(Encore.isProduction())
+
+    // enables @babel/preset-env polyfills
+    .configureBabelPresetEnv((config) => {
+        config.useBuiltIns = 'usage';
+        config.corejs = 3;
+    })
+
+// enables Sass/SCSS support
+//.enableSassLoader()
+
+// uncomment if you use TypeScript
+//.enableTypeScriptLoader()
+
+// uncomment to get integrity="..." attributes on your script & link tags
+// requires WebpackEncoreBundle 1.4 or higher
+//.enableIntegrityHashes(Encore.isProduction())
+
+// uncomment if you're having problems with a jQuery plugin
+//.autoProvidejQuery()
+
+// uncomment if you use API Platform Admin (composer require api-admin)
+//.enableReactPreset()
+//.addEntry('admin', './assets/admin.js')
+;
+
+module.exports = Encore.getWebpackConfig();