Update webpack.config.js for 5.0

Get `ibexaConfigManager` and `getIbexaConfig`, now absent by default, then use them, and finally add ibexaConfig to module.exports

Author: adriendupuis

code_samples/back_office/image_editor/config/webpack.config.js

@@ -1,34 +1,30 @@
-const Encore = require('@symfony/webpack-encore');
+const fs = require('fs');
 const path = require('path');
-const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa');
-const ibexaConfig = getIbexaConfig(Encore);
-const customConfigs = require('./ibexa.webpack.custom.configs.js');
-const { isReactBlockPathCreated } = require('./ibexa.webpack.config.react.blocks.js');
-const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager');
+const Encore = require('@symfony/webpack-encore');
+const getWebpackConfigs = require('@ibexa/frontend-config/webpack-config/get-configs');
+const customConfigsPaths = require('./var/encore/ibexa.webpack.custom.config.js');
+
+const customConfigs = getWebpackConfigs(Encore, customConfigsPaths);
+const isReactBlockPathCreated = fs.existsSync('./assets/page-builder/react/blocks');
 
 Encore.reset();
 Encore
     .setOutputPath('public/build/')
     .setPublicPath('/build')
-    .enableStimulusBridge('./assets/controllers.json')
     .enableSassLoader()
-    .enableReactPreset()
+    .enableReactPreset((options) => {
+        options.runtime = 'classic';
+    })
     .enableSingleRuntimeChunk()
     .copyFiles({
         from: './assets/images',
         to: 'images/[path][name].[ext]',
-        pattern: /\.(png|svg)$/
+        pattern: /\.(png|svg)$/,
     })
-    .configureBabel((config) => {
-        config.plugins.push('@babel/plugin-proposal-class-properties');
-    })
-
-    // enables @babel/preset-env polyfills
     .configureBabelPresetEnv((config) => {
         config.useBuiltIns = 'usage';
         config.corejs = 3;
-    })
-;
+    });
 
 // Welcome page stylesheets
 Encore.addEntry('welcome-page-css', [
@@ -47,18 +43,21 @@ if (isReactBlockPathCreated) {
 
 Encore.addEntry('app', './assets/app.js');
 
-// Image Editor Dot Action
+const projectConfig = Encore.getWebpackConfig();
+
+projectConfig.name = 'app';
+
+/* Get ibexaConfig and ibexaConfigManager */
+const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager');
+const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa');
+const ibexaConfig = getIbexaConfig();
+
+/* Add entries to Admin UI layout JS */
 ibexaConfigManager.add({
     ibexaConfig,
     entryName: 'ibexa-admin-ui-layout-js',
     newItems: [ path.resolve(__dirname, './assets/random_dot/random-dot.js'), ],
 });
 
-const projectConfig = Encore.getWebpackConfig();
-
-projectConfig.name = 'app';
-
+/* Add ibexaConfig to module.exports */
 module.exports = [ibexaConfig, ...customConfigs, projectConfig];
-
-// uncomment this line if you've commented-out the above lines
-// module.exports = [ eZConfig, ibexaConfig, ...customConfigs ];

docs/content_management/images/extend_image_editor.md

@@ -32,11 +32,10 @@ Configure the new Image Editor action under the `ibexa.system.<scope>.image_edit
 ## Add entry to the Webpack configuration
 
 Once you create and configure the React component, you must add an entry to [the Webpack configuration](3_customize_the_front_page.md#configuring-webpack).
-In the root directory of your project, modify the `webpack.config.js` file by adding the following code:
+In the root directory of your project, modify the `webpack.config.js` file by adding the following code in replacement of the default `module.exports = [...customConfigs, projectConfig];`:
 
-``` js
-[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 6, 7) =]]//...
-[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 50, 55) =]]
+``` js hl_lines="10 14"
+[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 49, 63) =]]
 ```
 At this point you should be able to see a new button in the Image Editor's UI.