Skip to content
  • Documentation >
  • Extend Back Office >
  • Back Office elements >
  • Importing assets from a bundle

Importing assets from a bundle

Ibexa DXP uses Webpack Encore for asset management.

Configuration from a bundle

To import assets from a bundle, you must configure them in the bundle's Resources/encore/ez.config.js file:

1
2
3
4
5
6
7
const path = require('path');

module.exports = (Encore) => {
    Encore.addEntry('<entry-name>', [
        path.resolve(__dirname, '<path_to_file>'),
    ]);
};

Use <entry-name> to refer to this configuration entry from Twig templates:

{{ encore_entry_script_tags('<entry-name>', null, 'ezplatform') }}

To import CSS files only, use:

{{ encore_entry_link_tags('<entry-name>', null, 'ezplatform') }}

Tip

After you add new files, run php bin/console cache:clear.

For a full example of importing asset configuration, see ez.config.js

To edit existing configuration entries, create a Resources/encore/ez.config.manager.js file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const path = require('path');

module.exports = (eZConfig, eZConfigManager) => {
    eZConfigManager.replace({
        eZConfig,
        entryName: '<entry-name>',
        itemToReplace: path.resolve(__dirname, '<path_to_old_file>'),
        newItem: path.resolve(__dirname, '<path_to_new_file>'),
    });
    eZConfigManager.remove({
        eZConfig,
        entryName: '<entry-name>',
        itemsToRemove: [
            path.resolve(__dirname, '<path_to_old_file>'),
            path.resolve(__dirname, '<path_to_old_file>'),
        ],
    });
    eZConfigManager.add({
        eZConfig,
        entryName: '<entry-name>',
        newItems: [
            path.resolve(__dirname, '<path_to_new_file>'),
            path.resolve(__dirname, '<path_to_new_file>'),
        ],
    });
};

Tip

If you do not know what entryName to use, you can use the browser's developer tools to check what files are loaded on the given page. Then, use the file name as entryName.

Tip

After you add new files, run php bin/console cache:clear.

For a full example of overriding configuration, see ez.config.manager.js.

To add a new configuration under your own namespace and with its own dependencies, add the Resources/encore/ez.webpack.custom.config.js file, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    const Encore = require('@symfony/webpack-encore');

    Encore.setOutputPath('<custom-path>')
        .setPublicPath('<custom-path>')
        .addExternals('<custom-externals>')
        // ...
        .addEntry('<entry-name>', ['<JS-path>']);

    const customConfig = Encore.getWebpackConfig();

    customConfig.name = 'customConfigName';

    // Config or array of configs: [customConfig1, customConfig2];
    module.exports = customConfig;

Tip

If you don't plan to add multiple entry files on the same page in your custom configuration, use the disableSingleRuntimeChunk() function to avoid adding a separate runtime.js file. Otherwise, your JS code may be run multiple times. By default, the enableSingleRuntimeChunk() function is used.

Configuration from main project files

If you prefer to include the asset configuration in the main project files, add it in webpack.config.js.

To overwrite the built-in assets, use the following configuration to replace, remove or add asset files in webpack.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
eZConfigManager.replace({
    eZConfig,
    entryName: '<entry-name>',
    itemToReplace: path.resolve(__dirname, '<path_to_old_file>'),
    newItem: path.resolve(__dirname, '<path_to_new_file>'),
});

eZConfigManager.remove({
    eZConfig,
    entryName: '<entry-name>',
    itemsToRemove: [
        path.resolve(__dirname, '<path_to_old_file>'),
        path.resolve(__dirname, '<path_to_old_file>'),
    ],
});

eZConfigManager.add({
    eZConfig,
    entryName: '<entry-name>',
    newItems: [
        path.resolve(__dirname, '<path_to_new_file>'),
        path.resolve(__dirname, '<path_to_new_file>'),
    ],
});