Enable versioning of assets in production

app/config/sculpin_kernel.yml

@@ -11,7 +11,17 @@ sculpin_content_types:
         permalink: talks/:basename/
         taxonomies: [tags]
 
+parameters:
+    asset.manifest_dir: '%sculpin.source_dir%'
+
 services:
+    App\Asset\TwigExtension\EncoreExtension:
+        autowire: true
+        arguments:
+            $manifestDir: '%asset.manifest_dir%'
+        tags:
+            - { name: twig.extension }
+
     App\Talk\TwigExtension\TalksExtension:
         tags:
             - { name: twig.extension }

app/src/Asset/TwigExtension/EncoreExtension.php

@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Asset\TwigExtension;
+
+use Sculpin\Contrib\ProxySourceCollection\ProxySourceCollection;
+use Tightenco\Collect\Support\Collection;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+use Twig\TwigFunction;
+
+class EncoreExtension extends AbstractExtension
+{
+    /** @var string */
+    private $manifestDir;
+
+    /**
+     * {@inheritdoc}
+     */
+    public function __construct(string $manifestDir)
+    {
+        $this->manifestDir = $manifestDir;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getName()
+    {
+        return 'app.encore';
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getFunctions()
+    {
+        return [
+            new TwigFunction('asset', [$this, 'generateAssetPaths']),
+        ];
+    }
+
+    public function generateAssetPaths(string $assetName): string
+    {
+        if (!$manifest = file_get_contents($this->manifestPath($assetName))) {
+            return $this->defaultPath($assetName);
+        }
+
+        return (new Collection(json_decode($manifest, true)))
+            ->get($assetName, $assetName);
+    }
+
+    private function manifestPath(string $assetName): string
+    {
+        return preg_replace('/(?<=\/)[\w.]+$/', 'manifest.json', $this->defaultPath($assetName)) ?? $this->defaultPath($assetName);
+    }
+
+    private function defaultPath(string $assetName): string
+    {
+        return "{$this->manifestDir}/{$assetName}";
+    }
+}

source/_layouts/app.html.twig

@@ -9,7 +9,7 @@
             <meta name="twitter:creator" content="@{{ site.twitter.user }}">
         {% endblock %}
 
-        <link rel="stylesheet" href="/build/app.css">
+        <link rel="stylesheet" href="{{ asset('build/app.css') }}">
         {% block stylesheets %}{% endblock %}
 
         {% for size in site.apple_touch_icon_sizes %}
@@ -29,7 +29,7 @@
             <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics.id }}', 'auto'); ga('send', 'pageview');</script>
         {% endif %}
 
-        <script src="/build/app.js"></script>
+        <script src="{{ asset('build/app.js') }}"></script>
         {% block scripts %}{% endblock %}
     </body>
 </html>

webpack.config.js

@@ -13,7 +13,9 @@ Encore
   .enableSourceMaps(!Encore.isProduction())
 
 if (Encore.isProduction()) {
-  Encore.addPlugin(new PurgecssPlugin({
+  Encore
+    .enableVersioning()
+    .addPlugin(new PurgecssPlugin({
       defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
       paths: () => glob.sync([
         'assets/**/*.vue',