Skip to content
  • Documentation >
  • Administration >
  • 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, configure them in an ibexa.config.js file that you create either in the bundle's Resources/encore/ folder, or in the encore folder in the root directory of your project:

1
2
3
4
5
6
7
const path = require('path');
git 
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, 'ibexa') }}

To import CSS files only, use:

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

Tip

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

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

To edit existing configuration entries, either in the bundle's Resources/encore/ folder, or in the encore folder in the root folder of your project, create an ibexa.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 = (IbexaConfig, IbexaConfigManager) => {
    IbexaConfigManager.replace({
        IbexaConfig,
        entryName: '<entry-name>',
        itemToReplace: path.resolve(__dirname, '<path_to_old_file>'),
        newItem: path.resolve(__dirname, '<path_to_new_file>'),
    });
    IbexaConfigManager.remove({
        IbexaConfig,
        entryName: '<entry-name>',
        itemsToRemove: [
            path.resolve(__dirname, '<path_to_old_file>'),
            path.resolve(__dirname, '<path_to_old_file>'),
        ],
    });
    IbexaConfigManager.add({
        IbexaConfig,
        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 ibexa.config.manager.js.

To add a new configuration under your own namespace and with its own dependencies, create an ibexa.webpack.custom.config.js file that you create either in the bundle's Resources/encore/ folder, or in the encore folder in the root directory of your project, 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
IbexaConfigManager.replace({
    IbexaConfig,
    entryName: '<entry-name>',
    itemToReplace: path.resolve(__dirname, '<path_to_old_file>'),
    newItem: path.resolve(__dirname, '<path_to_new_file>'),
});

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

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