commonChunks - Githubissues

Well, currently it's not so easy to use, but for this moment it's possible in this way:

configure webpack.config.js to use the plugin, for example new CommonsChunkPlugin('commons.[hash].js') (use hash in the filename to have cache busting)
use getAssetUrl of maba_webpack.asset_manager service with given name - in this example 'commons.[hash].js'. Using twig function is not really an option as asset collector will think that it's entry point and not just generated asset.

I plan to look how to provide better support for it.

What is your use-case? Do you want to have single commons file or separate ones ("multiple common chunks", as they call it in documentation)?

One possible way would be to integrate "groups" of scripts inside twig tags. Something like this:

{% webpack_stylesheets group=admin '@ApplicationBundle/Resources/assets/admin1.js' %}
    <script src="{{ asset_url }}"></script>
{% end_webpack_stylesheets %}

Somewhere else:

{% webpack_stylesheets group=admin '@ApplicationBundle/Resources/assets/admin2.js' %}
    <script src="{{ asset_url }}"></script>
{% end_webpack_stylesheets %}

This would collect assets in each group, add commons chunk plugin for each group and include that common chunk in each of those tags.

In another hand, would this really be necessary/used? It would not work nicely with function, too (no way to add additional javascript file here). It's not really clear, how it could be used if loaded asynchronously, too.

Maybe some semi-manual approach would be better? For example, just a twig function for easier common chunks integration and some documentation on how to configure everything correctly.

usegetAssetUrl of maba_webpack.asset_manager service with given name - in this example 'commons.[hash].js'.

This does not work for me. (Disclaimer: i'm using webpack2, but the same issue should apply to webpack1 too.)

The problem is that getAssetUrl uses AssetNameGenerator which always adds an sha1 hash before looking up the real asset path in webpack_manifest.

But the commons.[hash].js entry in the manifest doesn't have the sha1 hash part causing the following error:

[2016-11-29 11:08:34] request.CRITICAL: Uncaught PHP Exception Twig_Error_Runtime: "An exception has been thrown during the rendering of a template ("No information in manifest for commons.[hash].js (key commons.[hash]-d8680d7994b61d397a23f6bd7b2586dcab998c1e). Is maba:webpack:dev-server running in the background?") in "xWebAppBundle::base.html.twig" at line 35." at /var/www/website/app/cache/prod/classes.php line 1300 {"exception":"[object] (Twig_Error_Runtime(code: 0): An exception has been thrown during the rendering of a template (\"No information in manifest for commons.[hash].js (key commons.[hash]-d8680d7994b61d397a23f6bd7b2586dcab998c1e). Is maba:webpack:dev-server running in the background?\") in \"xxx::base.html.twig\" at line 35. at /var/www/website/app/cache/prod/classes.php:1300, RuntimeException(code: 0): No information in manifest for commons.[hash].js (key commons.[hash]-d8680d7994b61d397a23f6bd7b2586dcab998c1e). Is maba:webpack:dev-server running in the background? at /var/www/website/vendor/maba/webpack-bundle/src/Service/AssetManager.php:47)"} []

base.html.twig line 35:

<script type="application/javascript" src="{{ webpack_asset_manager.getAssetUrl('commons.[hash].js') }}"></script>

compile call:

/var/www/website$ app/console maba:webpack:compile --env=prod
Hash: 6a04f2dd62b14516bda2
Version: webpack 2.1.0-beta.27
Time: 4828ms
                                                             Asset       Size  Chunks             Chunk Names
x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9.160f42133c85ba239f38.js    27.1 kB       0  [emitted]  x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9
y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7.ac9dbb380ed05f1ead85.js    1.24 kB       1  [emitted]  y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7
z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7.70cababb905935614dd6.js  695 bytes       2  [emitted]  z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7
                                   commons.6a04f2dd62b14516bda2.js    88.9 kB       3  [emitted]  commons.[hash].js

webpack_manifest.php

<?php return array (
  'x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9' => 
  array (
    'js' => '/compiled/x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9.160f42133c85ba239f38.js',
  ),
  'y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7' => 
  array (
    'js' => '/compiled/y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7.ac9dbb380ed05f1ead85.js',
  ),
  'z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7' => 
  array (
    'js' => '/compiled/z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7.70cababb905935614dd6.js',
  ),
  'commons.[hash].js' => 
  array (
    'js' => '/compiled/commons.6a04f2dd62b14516bda2.js',
  ),
);

CommonsChunk config

    config.plugins = [
        new ExtractTextPlugin({
                filename: BUILD ? '[name].[hash].css' : '[name].bundle.css',

                disable: !options.parameters.extract_css
            }
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name:'commons.[hash].js',
            filename:'commons.[hash].js',
            minChunks:2
        }),

    ];

My usecase is a site with multiple routes that use a common base template with a customizable style, content and script blocks. Some routes require more than one different 3rd party library, while others don't require js at all, so having multiple common chunks available would be great. Using one big 'commons' chunk would still be better than no chunking at all.

I'm fine with manual inclusion of common chunks in templates and explicit chunk definition in webpack config. In fact I would greatly prefer that over an automatic approach that distributes the actual chunk configuration accross multiple twig files.

ps. changing generateName in AssetNameGenerator to return just the filename instead of filename-[sha1] seems to resolve my issue above. pps. I'm not that familiar with symfony, but if generateName is called in a twig function, wouldn't it calculate the sha1 on every client request that uses the template, causing additional cpu load and increased response times?

mariusbalcytis / webpack-bundle

commonChunks #28