Update "Add entry to the Webpack configuration" for 5.0

[adriendupuis]

Question	Answer
JIRA Ticket	N/A
Versions	5.0
Edition	All

webpack.config.js: Update ibexaConfigManager and getIbexaConfig paths

• ibexaConfigManager: ./ibexa.webpack.config.manager.js file doesn't exist anymore, the alias @ibexa/frontend-config/webpack-config/manager must be used instead.

• ibexaConfig:

  • https://github.com/ibexa/recipes-dev/blob/master/ibexa/oss/4.6/encore/webpack.config.js
  • https://github.com/ibexa/recipes-dev/blob/master/ibexa/oss/5.0/encore/webpack.config.js
    • ibexaConfig isn't available by default anymore, it must be created.

Previews:

• "Administration" > "Back office" >
  • "Importing assets from a bundle" > "Configuration from main project files"
  • "Browser" > "Add browser tab" > "Add tab to webpack config"
  • "Sub-items list" > "Create custom sub-items list view"
  • "Customize search suggestion" > "Add custom suggestion source"
• "Content management" >
  • "Extend Image Editor" > "Add entry to the Webpack configuration"
  • "Create Form Builder Form attribute" > "Add scripts"
• "AI" > "Extend AI Actions" > "Custom Action Type use case" > "Integrate into the back office"
• "Update from v4.6 to v5.0" > "Update custom code for Ibexa DXP 5.0" > "Update JavaScript" > "webpack.config.js usage update" (new section)

Already up-to-date:

• "Notification channels" > "Create notification class" > "ControllerFeedback
  example"
• "Shopping list design" > ""Add to shopping list" widget"

TODO after merge:

• Copy only update_to_5.0.mdfile to 4.6 branch
• Cherry-pick everything to 6.0 branch
• Not needed on SaaS

Checklist

• Text renders correctly
• Text has been checked with vale
• Description metadata is up to date
• Redirects cover removed/moved pages
• Code samples are working
• PHP code samples have been fixed with PHP CS fixer
• Added link to this PR in relevant JIRA ticket or code PR

[github-actions]

Preview of modified files

Preview of modified Markdown:

• docs/administration/back_office/back_office_elements/importing_assets_from_bundle.md
• docs/administration/back_office/browser/add_browser_tab.md
• docs/administration/back_office/customize_search_suggestion.md
• docs/administration/back_office/subitems_list.md
• docs/ai/ai_actions/extend_ai_actions.md
• docs/content_management/forms/create_form_attribute.md
• docs/content_management/images/extend_image_editor.md
• docs/update_and_migration/from_4.6/update_to_5.0.md

[github-actions]

Summary

Status	Count
🔍 Total	736715
🔗 Unique	14808
✅ Successful	6218
⏳ Timeouts	0
🔀 Redirected	5
👻 Excluded	730495
❓ Unknown	0
🚫 Errors	2
⛔ Unsupported	0

Errors per input

Errors in site/discounts/extend_discounts/index.html

• [302] https://symfony.com/doc/current/components/expression_language.html (at 14262:68) | Rejected status code: 302 Found

Errors in site/infrastructure_and_maintenance/cache/persistence_cache/index.html

• [ERROR] https://symfony.com/doc/7.4/components/cache/cache_pools.html#creating-cache-pools (at 14366:64) | Cannot find fragment

Redirects per input

Redirects in site/content_management/workflow/workflow_api/index.html

• https://symfony.com/doc/7.4/components/workflow.html --[301]--> https://symfony.com/doc/7.4/workflow.html

Redirects in site/discounts/extend_discounts/index.html

• https://symfony.com/doc/current/components/expression_language.html --[301]--> https://symfony.com/doc/8.1/expression_language.html

Redirects in site/infrastructure_and_maintenance/cache/persistence_cache/index.html

• https://symfony.com/doc/7.4/components/cache.html --[301]--> https://symfony.com/doc/7.4/cache.html

Redirects in site/templating/templates/templates/index.html

• https://symfony.com/doc/7.4/components/expression_language.html --[301]--> https://symfony.com/doc/7.4/expression_language.html

Redirects in site/update_and_migration/from_2.5/to_3.3/index.html

• https://symfony.com/doc/7.4/quick_tour/flex_recipes.html --[301]--> https://symfony.com/tour/flex-recipes

Full Github Actions output

[github-actions]

code_samples/ change report

Before (on target branch)	After (in current PR)
code_samples/ai_actions/webpack.config.js docs/ai/ai_actions/extend_ai_actions.md@368:``` js	code_samples/ai_actions/webpack.config.js docs/ai/ai_actions/extend_ai_actions.md@368:``` js
docs/ai/ai_actions/extend_ai_actions.md@369:[[= include_file('code_samples/ai_actions/webpack.config.js') =]]	docs/ai/ai_actions/extend_ai_actions.md@369:[[= include_code('code_samples/ai_actions/webpack.config.js') =]]
docs/ai/ai_actions/extend_ai_actions.md@370:```	docs/ai/ai_actions/extend_ai_actions.md@370:```
001⫶const ibexaConfigManager = require('./ibexa.webpack.config.manager.js'); 002⫶ 003⫶ibexaConfigManager.add({ 004⫶ ibexaConfig, 005⫶ entryName: 'ibexa-admin-ui-layout-js', 006⫶ newItems: [ 007⫶ path.resolve(__dirname, './assets/js/addAudioModule.js') 008⫶ ], 009⫶});	001⫶const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); 002⫶const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); 003⫶const ibexaConfig = getIbexaConfig(); 004⫶ 005⫶ibexaConfigManager.add({ 006⫶ ibexaConfig, 007⫶ entryName: 'ibexa-admin-ui-layout-js', 008⫶ newItems: [ 009⫶ path.resolve(__dirname, './assets/js/addAudioModule.js') 010⫶ ], 011⫶}); 012⫶ 013⫶module.exports = [ibexaConfig, ...customConfigs, projectConfig];
code_samples/back_office/image_editor/config/webpack.config.js	code_samples/back_office/image_editor/config/webpack.config.js
docs/content_management/images/extend_image_editor.md@37:``` js docs/content_management/images/extend_image_editor.md@38:[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 6, 7) =]]//... docs/content_management/images/extend_image_editor.md@39:[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 50, 55) =]] docs/content_management/images/extend_image_editor.md@40:``` 001⫶const ibexaConfigManager = require('./ibexa.webpack.config.manager.js'); 002⫶//... 003⫶ibexaConfigManager.add({ 004⫶ ibexaConfig, 005⫶ entryName: 'ibexa-admin-ui-layout-js', 006⫶ newItems: [ path.resolve(__dirname, './assets/random_dot/random-dot.js'), ], 007⫶});	docs/content_management/images/extend_image_editor.md@37:``` js hl_lines="10" docs/content_management/images/extend_image_editor.md@38:[[= include_code('code_samples/back_office/image_editor/config/webpack.config.js', 52, 65) =]] docs/content_management/images/extend_image_editor.md@39:``` 001⫶/* Get ibexaConfig and ibexaConfigManager */ 002⫶const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); 003⫶const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); 004⫶const ibexaConfig = getIbexaConfig(); 005⫶ 006⫶/* Add dot action to Admin UI layout JS */ 007⫶ibexaConfigManager.add({ 008⫶ ibexaConfig, 009⫶ entryName: 'ibexa-admin-ui-layout-js', 010❇️ newItems: [ path.resolve(__dirname, './assets/random_dot/random-dot.js'), ], 011⫶}); 012⫶ 013⫶/* Export updated ibexaConfig and previous modules */ 014⫶module.exports = [ibexaConfig, ...customConfigs, projectConfig];
code_samples/back_office/search/append_to_webpack.config.js docs/administration/back_office/customize_search_suggestion.md@121:``` javascript docs/administration/back_office/customize_search_suggestion.md@122://…	code_samples/back_office/search/append_to_webpack.config.js docs/administration/back_office/customize_search_suggestion.md@121:``` javascript docs/administration/back_office/customize_search_suggestion.md@122://…
docs/administration/back_office/customize_search_suggestion.md@123:[[= include_file('code_samples/back_office/search/append_to_webpack.config.js') =]]	docs/administration/back_office/customize_search_suggestion.md@123:[[= include_code('code_samples/back_office/search/append_to_webpack.config.js') =]]
docs/administration/back_office/customize_search_suggestion.md@124:``` 001⫶//…	docs/administration/back_office/customize_search_suggestion.md@124:``` 001⫶//…
002⫶const ibexaConfigManager = require('./ibexa.webpack.config.manager.js'); 003⫶ 004⫶ibexaConfigManager.add({ 005⫶ ibexaConfig, 006⫶ entryName: 'ibexa-admin-ui-layout-js', 007⫶ newItems: [path.resolve(__dirname, './assets/js/admin.search.autocomplete.product.js')], 008⫶});	002⫶const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); 003⫶const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); 004⫶const ibexaConfig = getIbexaConfig(); 005⫶ 006⫶ibexaConfigManager.add({ 007⫶ ibexaConfig, 008⫶ entryName: 'ibexa-admin-ui-layout-js', 009⫶ newItems: [path.resolve(__dirname, './assets/js/admin.search.autocomplete.product.js')], 010⫶}); 011⫶ 012⫶module.exports = [ibexaConfig, ...customConfigs, projectConfig];
code_samples/forms/custom_form_attribute/webpack.config.js	code_samples/forms/custom_form_attribute/webpack.config.js
docs/content_management/forms/create_form_attribute.md@75:``` js hl_lines="49" docs/content_management/forms/create_form_attribute.md@76:[[= include_file('code_samples/forms/custom_form_attribute/webpack.config.js') =]]	docs/content_management/forms/create_form_attribute.md@75:``` js hl_lines="46" docs/content_management/forms/create_form_attribute.md@76:[[= include_code('code_samples/forms/custom_form_attribute/webpack.config.js') =]]
docs/content_management/forms/create_form_attribute.md@77:```	docs/content_management/forms/create_form_attribute.md@77:```
001⫶const Encore = require('@symfony/webpack-encore');	001⫶const fs = require('fs');
002⫶const path = require('path');	002⫶const path = require('path');
003⫶const getIbexaConfig = require('./ibexa.webpack.config.js'); 004⫶const ibexaConfig = getIbexaConfig(Encore); 005⫶const customConfigs = require('./ibexa.webpack.custom.configs.js'); 006⫶const { isReactBlockPathCreated } = require('./ibexa.webpack.config.react.blocks.js'); 007⫶ 008⫶Encore.reset(); 009⫶Encore 010⫶ .setOutputPath('public/build/') 011⫶ .setPublicPath('/build') 012⫶ .enableStimulusBridge('./assets/controllers.json') 013⫶ .enableSassLoader() 014⫶ .enableReactPreset() 015⫶ .enableSingleRuntimeChunk() 016⫶ .copyFiles({ 017⫶ from: './assets/images', 018⫶ to: 'images/[path][name].[ext]', 019⫶ pattern: /\.(png|svg)$/ 020⫶ }) 021⫶ .configureBabel((config) => { 022⫶ config.plugins.push('@babel/plugin-proposal-class-properties');	003⫶const Encore = require('@symfony/webpack-encore'); 004⫶const getWebpackConfigs = require('@ibexa/frontend-config/webpack-config/get-configs'); 005⫶const customConfigsPaths = require('./var/encore/ibexa.webpack.custom.config.js'); 006⫶ 007⫶const customConfigs = getWebpackConfigs(Encore, customConfigsPaths); 008⫶const isReactBlockPathCreated = fs.existsSync('./assets/page-builder/react/blocks'); 009⫶ 010⫶Encore.reset(); 011⫶Encore 012⫶ .setOutputPath('public/build/') 013⫶ .setPublicPath('/build') 014⫶ .enableSassLoader() 015⫶ .enableReactPreset((options) => { 016⫶ options.runtime = 'classic'; 017⫶ }) 018⫶ .enableSingleRuntimeChunk() 019⫶ .copyFiles({ 020⫶ from: './assets/images', 021⫶ to: 'images/[path][name].[ext]', 022⫶ pattern: /\.(png|svg)$/,
023⫶ })	023⫶ })
024⫶ 025⫶ // enables @babel/preset-env polyfills 026⫶ .configureBabelPresetEnv((config) => { 027⫶ config.useBuiltIns = 'usage'; 028⫶ config.corejs = 3; 029⫶ }) 030⫶; 031⫶ 032⫶// Welcome page stylesheets 033⫶Encore.addEntry('welcome-page-css', [ 034⫶ path.resolve(__dirname, './assets/scss/welcome-page.scss'), 035⫶]); 036⫶ 037⫶// Welcome page javascripts 038⫶Encore.addEntry('welcome-page-js', [ 039⫶ path.resolve(__dirname, './assets/js/welcome.page.js'), 040⫶]); 041⫶ 042⫶if (isReactBlockPathCreated) { 043⫶ // React Blocks javascript 044⫶ Encore.addEntry('react-blocks-js', './assets/js/react.blocks.js'); 045⫶} 046⫶ 047⫶Encore.addEntry('app', './assets/app.js'); 048⫶ 049❇️Encore.addEntry('formbuilder-richtext-checkbox-js', './assets/js/formbuilder-richtext-checkbox.js'); 050⫶ 051⫶const projectConfig = Encore.getWebpackConfig(); 052⫶ 053⫶projectConfig.name = 'app'; 054⫶ 055⫶module.exports = [ibexaConfig, ...customConfigs, projectConfig]; 056⫶ 057⫶// uncomment this line if you've commented-out the above lines 058⫶// module.exports = [ eZConfig, ibexaConfig, ...customConfigs ];	024⫶ .configureBabelPresetEnv((config) => { 025⫶ config.useBuiltIns = 'usage'; 026⫶ config.corejs = 3; 027⫶ }); 028⫶ 029⫶// Welcome page stylesheets 030⫶Encore.addEntry('welcome-page-css', [ 031⫶ path.resolve(__dirname, './assets/scss/welcome-page.scss'), 032⫶]); 033⫶ 034⫶// Welcome page javascripts 035⫶Encore.addEntry('welcome-page-js', [ 036⫶ path.resolve(__dirname, './assets/js/welcome.page.js'), 037⫶]); 038⫶ 039⫶if (isReactBlockPathCreated) { 040⫶ // React Blocks javascript 041⫶ Encore.addEntry('react-blocks-js', './assets/js/react.blocks.js'); 042⫶} 043⫶ 044⫶Encore.addEntry('app', './assets/app.js'); 045⫶ 046❇️Encore.addEntry('formbuilder-richtext-checkbox-js', './assets/js/formbuilder-richtext-checkbox.js'); 047⫶ 048⫶const projectConfig = Encore.getWebpackConfig(); 049⫶ 050⫶projectConfig.name = 'app'; 051⫶ 052⫶module.exports = [...customConfigs, projectConfig];

Download colorized diff