Using webpack on a common Symfony Bundle

So I managed to change my chunks configuration and now it’s easier to maintain inside my macros webpack.config.js :

    .enableSingleRuntimeChunk()
    .autoProvidejQuery()
    .splitEntryChunks()
    .configureSplitChunks(function (splitChunks) {
        splitChunks.name = function (module, chunks, cacheGroupKey) {
            const moduleFileName = module.identifier().split(/[\/,\\]/).reduceRight(item => item).replace(/\.[^/.]+$/, "");
            return `${cacheGroupKey}~${moduleFileName}`;
        };
        splitChunks.chunks = 'all';
    })

it creates one chunk per library, but then it’s easy to divide them into my macros.

{% macro jquery_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/jquery.js') }}"></script>
{% endmacro %}

{% macro bootstrap_js() %}
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap.js') }}"></script>
{% endmacro %}

{% macro bootstrapselect_js() %}
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap-select.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap-select.js') }}"></script>
{% endmacro %}

The vendors/chunks are duplicated but the browser don’t load them each time because they are the same file, so it’s ok.

It’s probably not the cleanest solution but it works in my specific use case.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top