Update "Add entry to the Webpack configuration" for 5.0

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.webpack.config.js');
-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.webpack.config.manager.js');
+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)$/
-    })
-    .configureBabel((config) => {
-        config.plugins.push('@babel/plugin-proposal-class-properties');
+        pattern: /\.(png|svg)$/,
     })
-
-    // enables @babel/preset-env polyfills
     .configureBabelPresetEnv((config) => {
         config.useBuiltIns = 'usage';
         config.corejs = 3;
-    })
-;
+    });
 
 // Welcome page stylesheets
 Encore.addEntry('welcome-page-css', [
@@ -47,18 +43,20 @@ if (isReactBlockPathCreated) {
 
 Encore.addEntry('app', './assets/app.js');
 
-// Image Editor Dot Action
-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';
 
-module.exports = [ibexaConfig, ...customConfigs, projectConfig];
+module.exports = [...customConfigs, projectConfig];
 
-// uncomment this line if you've commented-out the above lines
-// module.exports = [ eZConfig, ibexaConfig, ...customConfigs ];
+/* 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 dot action to Admin UI layout JS */
+ibexaConfigManager.add({
+    ibexaConfig,
+    entryName: 'ibexa-admin-ui-layout-js',
+    newItems: [ path.resolve(__dirname, './assets/random_dot/random-dot.js'), ],
+});

code_samples/back_office/search/append_to_webpack.config.js

@@ -1,4 +1,6 @@
-const ibexaConfigManager = require('./ibexa.webpack.config.manager.js');
+const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager');
+const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa');
+const ibexaConfig = getIbexaConfig();
 
 ibexaConfigManager.add({
     ibexaConfig,

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 appending the following code:
 
-``` 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"
+[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 51, 62) =]]
 ```
 At this point you should be able to see a new button in the Image Editor's UI.