将 webpack 块注入到树枝文件中答案

【问题标题】：Injecting webpack chunks to twig files将 webpack 块注入到树枝文件中
【发布时间】：2017-09-10 15:24:56
【问题描述】：

我正在使用 php/twig/webpack 工具创建一个传统网站（不是单页应用程序）。几乎每个站点都有自己的入口脚本。还有vendor和commonjs文件。

如何在我的树枝文件中注入条目块与散列（以处理浏览器缓存）？这些存储在templates 文件夹中并且应该留在那里（不要转到public 文件夹，因为它们被PHP 使用）。如何将脚本标签注入树枝文件？

这是我的树枝通用布局文件：

{% block html %}
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <base href="/">
        <title>
            {% block title %}{% endblock %}
        </title>
        <link href="css/style.css" rel="stylesheet">
        <script src="js/vendor.js"></script>
        <script src="js/common.js"></script>
    </head>
    <body>
        {% block body %}
        {% endblock %}

        {% block scripts %}
        {% endblock %}
    </body>
</html>
{% endblock %}

例如联系页面的树枝：

{% extends "layout/bootstrap.twig" %}

{% block scripts %}
    <script src="js/entry-contact.js"></script>
{% endblock %}

{% block body %}
    <h1>Contact form</h1>
{% endblock %}

【问题讨论】：

标签： symfony webpack twig

【解决方案1】：

提取

正如Webpack documentation 中所说，可以从编译统计信息中提取文件哈希。

module.exports = {
  /*...*/
  plugins: [
    function() {
      this.plugin("done", function(stats) {
        require("fs").writeFileSync(
          "stats.json", 
          JSON.stringify(stats.toJson())
        );
      });
    }
  ]
};

但使用以下插件之一更容易：webpack-manifest-plugin 或 assets-webpack-plugin。例如，WebpackManifestPlugin 创建了一个简单的 JSON 文件 manifest.json，其中捆绑映射到实际文件名：

{
  "main.js": "main.155567618f4367cd1cb8.js",
  "vendor.js": "vendor.c2330c22cd2decb5da5a.js"
}

现在您需要阅读它并更改模板中的路径。

注入

例如，我们可以创建一个简单的Twig extension：

use Twig_Extension;
use Twig_SimpleFilter;

class WebpackAssetsExtension extends Twig_Extension
{
    private $manifest;

    public function __construct()
    {
        // ONLY FOR EXAMPLE! Code is intentionally simplified.
        // In real world you should not parse this JSON in production.
        // Do it at the container building step (in bundle extensions, 
        // compiler passes, etc) or at the cache warming.

        $jsonContents   = file_get_contents('manifest.json');
        $this->manifest = json_decode($jsonContents, true);
    }

    public function getFilters()
    {
        return [
            new Twig_SimpleFilter('webpack_asset', function (string $name): string {
                return $this->manifest[$name];
            }),
        ];
    }
}

并在您的模板中应用此过滤器：

<script src="{{ 'vendor.js'|webpack_asset }}"></script>

【讨论】：

它确实有效 - 非常感谢。一个问题 - 在 Twig v2 中使用 new Twig_Filter()。再次感谢